<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js coal">
    <head>
        <!-- Book generated using mdBook -->
        <meta charset="UTF-8">
        <title>Css - Andrew&#x27;s Blog</title>


        <!-- Custom HTML head -->
        
        <meta name="description" content="Andrew Ryan&#x27;s Blog">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#ffffff" />

        <link rel="icon" href="../../favicon.svg">
        <link rel="shortcut icon" href="../../favicon.png">
        <link rel="stylesheet" href="../../css/variables.css">
        <link rel="stylesheet" href="../../css/general.css">
        <link rel="stylesheet" href="../../css/chrome.css">

        <!-- Fonts -->
        <link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
        <link rel="stylesheet" href="../../fonts/fonts.css">

        <!-- Highlight.js Stylesheets -->
        <link rel="stylesheet" href="../../highlight.css">
        <link rel="stylesheet" href="../../tomorrow-night.css">
        <link rel="stylesheet" href="../../ayu-highlight.css">

        <!-- Custom theme stylesheets -->
        <link rel="stylesheet" href="../../src/style/custom.css">

        <!-- MathJax -->
        <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    </head>
    <body>
    <div id="body-container">
        <!-- Provide site root to javascript -->
        <script>
            var path_to_root = "../../";
            var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "coal" : "coal";
        </script>

        <!-- Work around some values being stored in localStorage wrapped in quotes -->
        <script>
            try {
                var theme = localStorage.getItem('mdbook-theme');
                var sidebar = localStorage.getItem('mdbook-sidebar');

                if (theme.startsWith('"') && theme.endsWith('"')) {
                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                }

                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                }
            } catch (e) { }
        </script>

        <!-- Set the theme before any content is loaded, prevents flash -->
        <script>
            var theme;
            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
            if (theme === null || theme === undefined) { theme = default_theme; }
            var html = document.querySelector('html');
            html.classList.remove('no-js')
            html.classList.remove('coal')
            html.classList.add(theme);
            html.classList.add('js');
        </script>

        <!-- Hide / unhide sidebar before it is displayed -->
        <script>
            var html = document.querySelector('html');
            var sidebar = null;
            if (document.body.clientWidth >= 1080) {
                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                sidebar = sidebar || 'visible';
            } else {
                sidebar = 'hidden';
            }
            html.classList.remove('sidebar-visible');
            html.classList.add("sidebar-" + sidebar);
        </script>

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <div class="sidebar-scrollbox">
                <ol class="chapter"><li class="chapter-item affix "><a href="../../index.html">Andrew's Blog</a></li><li class="chapter-item "><a href="../../posts/linux/linux.html"><strong aria-hidden="true">1.</strong> Linux</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/linux/install_linux.html"><strong aria-hidden="true">1.1.</strong> install linux</a></li><li class="chapter-item "><a href="../../posts/linux/bash_profile.html"><strong aria-hidden="true">1.2.</strong> bash profile</a></li><li class="chapter-item "><a href="../../posts/linux/command_list.html"><strong aria-hidden="true">1.3.</strong> command list</a></li><li class="chapter-item "><a href="../../posts/linux/git_guide.html"><strong aria-hidden="true">1.4.</strong> git guide</a></li><li class="chapter-item "><a href="../../posts/linux/tar.html"><strong aria-hidden="true">1.5.</strong> tar</a></li><li class="chapter-item "><a href="../../posts/Linux/git_cheatsheet.html"><strong aria-hidden="true">1.6.</strong> Git Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/Linux/bash_cheatsheet.html"><strong aria-hidden="true">1.7.</strong> Bash Cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/macos/mac.html"><strong aria-hidden="true">2.</strong> MacOS</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/macos/macos_profiles.html"><strong aria-hidden="true">2.1.</strong> macos profiles</a></li><li class="chapter-item "><a href="../../posts/macos/macos_pwn_env_setup.html"><strong aria-hidden="true">2.2.</strong> macos pwn env setup</a></li></ol></li><li class="chapter-item "><a href="../../posts/swift/swift.html"><strong aria-hidden="true">3.</strong> Swift</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/swift/learn_swift.html"><strong aria-hidden="true">3.1.</strong> learn swift basics</a></li><li class="chapter-item "><a href="../../posts/swift/swift_extensions.html"><strong aria-hidden="true">3.2.</strong> Swift extensions</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_extension.html"><strong aria-hidden="true">3.3.</strong> SwiftUI extensions</a></li><li class="chapter-item "><a href="../../posts/swift/install_swift.html"><strong aria-hidden="true">3.4.</strong> install swift</a></li><li class="chapter-item "><a href="../../posts/swift/task_planner.html"><strong aria-hidden="true">3.5.</strong> implment task panner app with SwiftUI</a></li><li class="chapter-item "><a href="../../posts/swift/swift_cheat_sheet.html"><strong aria-hidden="true">3.6.</strong> Swift Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/swift/yinci_url.html"><strong aria-hidden="true">3.7.</strong> Personal privacy protocol</a></li><li class="chapter-item "><a href="../../posts/swift/swift_regular_exressions.html"><strong aria-hidden="true">3.8.</strong> Swift regular exressions</a></li><li class="chapter-item "><a href="../../posts/ios/how_to_create_beautiful_ios_charts_in_swift.html"><strong aria-hidden="true">3.9.</strong> How to Create Beautiful iOS Charts in Swift</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_source_code.html"><strong aria-hidden="true">3.10.</strong> SwiftUI source code</a></li><li class="chapter-item "><a href="../../posts/swift/use_swift_fetch_iciba_api.html"><strong aria-hidden="true">3.11.</strong> use swift fetch iciba API</a></li></ol></li><li class="chapter-item "><a href="../../posts/ios/ios.html"><strong aria-hidden="true">4.</strong> iOS</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ios/cocaposd_setup_and_install_for_ios_project.html"><strong aria-hidden="true">4.1.</strong> cocaposd setup and install for ios project</a></li><li class="chapter-item "><a href="../../posts/ios/swiftui_show_gif_image.html"><strong aria-hidden="true">4.2.</strong> SwiftUI show gif image</a></li><li class="chapter-item "><a href="../../posts/ios/implement_task_planner_app.html"><strong aria-hidden="true">4.3.</strong> implement Task planner App</a></li></ol></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c.html"><strong aria-hidden="true">5.</strong> Objective-C</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/objective_c/objective_c_cheat_sheet.html"><strong aria-hidden="true">5.1.</strong> Objective-C Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c_for_absolute_beginners_read_note.html"><strong aria-hidden="true">5.2.</strong> Objective-C Note</a></li></ol></li><li class="chapter-item "><a href="../../posts/dart/dart.html"><strong aria-hidden="true">6.</strong> Dart</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/dart/flutter.html"><strong aria-hidden="true">6.1.</strong> Flutter Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/dart/dart_cheat_sheet.html"><strong aria-hidden="true">6.2.</strong> Dart Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/flutter/flutter_dev_test.html"><strong aria-hidden="true">6.3.</strong> Flutter dev test</a></li></ol></li><li class="chapter-item "><a href="../../posts/rust/rust.html"><strong aria-hidden="true">7.</strong> Rust</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/rust/offline_use_rust.html"><strong aria-hidden="true">7.1.</strong> Offline use rust</a></li><li class="chapter-item "><a href="../../posts/rust/rust_grammer.html"><strong aria-hidden="true">7.2.</strong> rust grammar</a></li><li class="chapter-item "><a href="../../posts/rust/pase_string_and_decimal_conversion.html"><strong aria-hidden="true">7.3.</strong> pase string and decimal conversion</a></li><li class="chapter-item "><a href="../../posts/rust/parse_types.html"><strong aria-hidden="true">7.4.</strong> rust types</a></li><li class="chapter-item "><a href="../../posts/rust/rust_life_cycle.html"><strong aria-hidden="true">7.5.</strong> Rust life cycle</a></li><li class="chapter-item "><a href="../../posts/rust/rust_generic.html"><strong aria-hidden="true">7.6.</strong> rust generics</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implment_matrix.html"><strong aria-hidden="true">7.7.</strong> Rust implement matrix</a></li><li class="chapter-item "><a href="../../posts/rust/rust_sort.html"><strong aria-hidden="true">7.8.</strong> Rust implement sort algorithms</a></li><li class="chapter-item "><a href="../../posts/rust/implement_aes_encryption.html"><strong aria-hidden="true">7.9.</strong> Rust implement AEC encryption and decryption</a></li><li class="chapter-item "><a href="../../posts/rust/implement_trie_data_structure.html"><strong aria-hidden="true">7.10.</strong> implement trie data structure</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_tree.html"><strong aria-hidden="true">7.11.</strong> implement tree data_structure</a></li><li class="chapter-item "><a href="../../posts/rust/list_dir.html"><strong aria-hidden="true">7.12.</strong> list dir</a></li><li class="chapter-item "><a href="../../posts/rust/fast_way_to_implment_object_trait.html"><strong aria-hidden="true">7.13.</strong> fast way to implment object trait</a></li><li class="chapter-item "><a href="../../posts/rust/compress_rust_binary_size.html"><strong aria-hidden="true">7.14.</strong> compress rust binary size</a></li><li class="chapter-item "><a href="../../posts/rust/implment_file_upload_backend.html"><strong aria-hidden="true">7.15.</strong> impliment file upload</a></li><li class="chapter-item "><a href="../../posts/rust/this_is_add_post_cli_implementation_in_rust.html"><strong aria-hidden="true">7.16.</strong> this is add_post cli implementation in rust</a></li><li class="chapter-item "><a href="../../posts/rust/use_rust_implment_a_copyclipbord_cli.html"><strong aria-hidden="true">7.17.</strong> Use rust implment a copyclipbord CLI</a></li><li class="chapter-item "><a href="../../posts/rust/sqlite_database_add_delete_update_show_in_rust.html"><strong aria-hidden="true">7.18.</strong> sqlite database add delete update show in rust</a></li><li class="chapter-item "><a href="../../posts/rust/implementing_tokio_joinhandle_for_wasm.html"><strong aria-hidden="true">7.19.</strong> Implementing tokio JoinHandle for wasm</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html"><strong aria-hidden="true">7.20.</strong> rust implement a crate for encode and decode brainfuck and ook</a></li><li class="chapter-item "><a href="../../posts/rust/slint_builtin_elements.html"><strong aria-hidden="true">7.21.</strong> Slint Builtin Elements</a></li><li class="chapter-item "><a href="../../posts/rust/corporate_network_install_rust_on_windows.html"><strong aria-hidden="true">7.22.</strong> Corporate network install Rust on windows</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_file_how_to_judge_static_link_or_dynamic_link_in_macos.html"><strong aria-hidden="true">7.23.</strong> rust binary file how to judge static link or dynamic link in Macos</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_include_dir_and_get_contents.html"><strong aria-hidden="true">7.24.</strong> rust binary include dir and get contents</a></li><li class="chapter-item "><a href="../../posts/rust/how_to_create_yolov8_based_object_detection_web_service_using_python,_julia,_node.js,_javascript,_go_and_rust.html"><strong aria-hidden="true">7.25.</strong> How to create YOLOv8-based object detection web service using Python, Julia, Node.js, JavaScript, Go and Rust</a></li><li class="chapter-item "><a href="../../posts/rust/implment_builder_proc_macro_for_command_struct.html"><strong aria-hidden="true">7.26.</strong> implment Builder proc-macro for Command struct</a></li></ol></li><li class="chapter-item "><a href="../../posts/java/java.html"><strong aria-hidden="true">8.</strong> Java</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/java/java_grammar.html"><strong aria-hidden="true">8.1.</strong> java grammar and codewar</a></li><li class="chapter-item "><a href="../../posts/java/run_jar.html"><strong aria-hidden="true">8.2.</strong> java run .jar</a></li><li class="chapter-item "><a href="../../posts/java/java_pomxml_add_defaultgoal_to_build.html"><strong aria-hidden="true">8.3.</strong> Java pomxml add defaultGoal to build</a></li><li class="chapter-item "><a href="../../posts/java/java_set_mvn_mirror.html"><strong aria-hidden="true">8.4.</strong> Java set mvn mirror</a></li></ol></li><li class="chapter-item "><a href="../../posts/python/python.html"><strong aria-hidden="true">9.</strong> Python</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/python/convert_pesn.html"><strong aria-hidden="true">9.1.</strong> convert pesn</a></li><li class="chapter-item "><a href="../../posts/python/find_remove_dir.html"><strong aria-hidden="true">9.2.</strong> find and remove dir</a></li><li class="chapter-item "><a href="../../posts/python/timing_message.html"><strong aria-hidden="true">9.3.</strong> wechat send message</a></li><li class="chapter-item "><a href="../../posts/python/use_python_openpyxl_package_read_and_edit_excel_files.html"><strong aria-hidden="true">9.4.</strong> Use python openpyxl package read and edit excel files</a></li><li class="chapter-item "><a href="../../posts/python/sanctum_model_yaml.html"><strong aria-hidden="true">9.5.</strong> sanctum model yaml</a></li><li class="chapter-item "><a href="../../posts/python/how_to_detect_objects_on_images_using_the_yolov8_neural_network.html"><strong aria-hidden="true">9.6.</strong> How to detect objects on images using the YOLOv8 neural network</a></li><li class="chapter-item "><a href="../../posts/python/use_huggingface_model.html"><strong aria-hidden="true">9.7.</strong> use huggingface model</a></li></ol></li><li class="chapter-item "><a href="../../posts/go/go.html"><strong aria-hidden="true">10.</strong> Go</a></li><li class="chapter-item "><a href="../../posts/javascript/js.html"><strong aria-hidden="true">11.</strong> Javascript</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/javascript/js_tutorial.html"><strong aria-hidden="true">11.1.</strong> js tutorial</a></li><li class="chapter-item "><a href="../../posts/javascript/js_tutorial_map.html"><strong aria-hidden="true">11.2.</strong> ja map</a></li><li class="chapter-item "><a href="../../posts/javascript/js_tutorial_math.html"><strong aria-hidden="true">11.3.</strong> js math</a></li><li class="chapter-item "><a href="../../posts/javascript/js_tutorial_object.html"><strong aria-hidden="true">11.4.</strong> js object</a></li><li class="chapter-item "><a href="../../posts/javascript/js_tutorial_set.html"><strong aria-hidden="true">11.5.</strong> js set</a></li><li class="chapter-item "><a href="../../posts/javascript/single_thread_and_asynchronous.html"><strong aria-hidden="true">11.6.</strong> single thread and asynchronous</a></li><li class="chapter-item "><a href="../../posts/javascript/this.html"><strong aria-hidden="true">11.7.</strong> js this</a></li><li class="chapter-item "><a href="../../posts/javascript/js_implment_aes.html"><strong aria-hidden="true">11.8.</strong> js implment aes</a></li><li class="chapter-item "><a href="../../posts/javascript/getting_started_with_ajax.html"><strong aria-hidden="true">11.9.</strong> getting started with ajax</a></li><li class="chapter-item "><a href="../../posts/javascript/BinarySearchTree.html"><strong aria-hidden="true">11.10.</strong> binary search tree</a></li><li class="chapter-item "><a href="../../posts/javascript/goole_zx.html"><strong aria-hidden="true">11.11.</strong> goole zx</a></li><li class="chapter-item "><a href="../../posts/javascript/es6.html"><strong aria-hidden="true">11.12.</strong> es6</a></li></ol></li><li class="chapter-item "><a href="../../posts/ruby/ruby.html"><strong aria-hidden="true">12.</strong> Ruby</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ruby/rails_setup_env.html"><strong aria-hidden="true">12.1.</strong> ruby on rails setup environment</a></li><li class="chapter-item "><a href="../../posts/ruby/learn_ruby.html"><strong aria-hidden="true">12.2.</strong> learn ruby</a></li><li class="chapter-item "><a href="../../posts/ruby/ruby_note.html"><strong aria-hidden="true">12.3.</strong> Ruby Note</a></li><li class="chapter-item "><a href="../../posts/ruby/setup_ruby_for_ctf.html"><strong aria-hidden="true">12.4.</strong> Setup ruby for CTF</a></li></ol></li><li class="chapter-item "><a href="../../posts/react/react.html"><strong aria-hidden="true">13.</strong> React</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/react/react_life_cycle.html"><strong aria-hidden="true">13.1.</strong> react life cycle</a></li><li class="chapter-item "><a href="../../posts/react/react_router.html"><strong aria-hidden="true">13.2.</strong> react router</a></li><li class="chapter-item "><a href="../../posts/react/react_this.html"><strong aria-hidden="true">13.3.</strong> react this</a></li><li class="chapter-item "><a href="../../posts/react/react_interviw.html"><strong aria-hidden="true">13.4.</strong> react interview</a></li><li class="chapter-item "><a href="../../posts/react/important_react_interview.html"><strong aria-hidden="true">13.5.</strong> important react interview</a></li><li class="chapter-item "><a href="../../posts/react/react_quick_reference.html"><strong aria-hidden="true">13.6.</strong> react quick reference</a></li><li class="chapter-item "><a href="../../posts/react/redux_quick_reference.html"><strong aria-hidden="true">13.7.</strong> redux quick reference</a></li></ol></li><li class="chapter-item "><a href="../../posts/vue/vue.html"><strong aria-hidden="true">14.</strong> Vue</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/vue/vue_ajax.html"><strong aria-hidden="true">14.1.</strong> vue ajax</a></li></ol></li><li class="chapter-item "><a href="../../posts/angular/angular.html"><strong aria-hidden="true">15.</strong> Angular</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/angular/controller_communication.html"><strong aria-hidden="true">15.1.</strong> controller communication</a></li><li class="chapter-item "><a href="../../posts/angular/creating_custom_directives.html"><strong aria-hidden="true">15.2.</strong> creating custom directives</a></li><li class="chapter-item "><a href="../../posts/angular/directive_notes.html"><strong aria-hidden="true">15.3.</strong> directive notes</a></li><li class="chapter-item "><a href="../../posts/angular/directive_communication.html"><strong aria-hidden="true">15.4.</strong> directive communication</a></li><li class="chapter-item "><a href="../../posts/angular/post_params.html"><strong aria-hidden="true">15.5.</strong> post params</a></li><li class="chapter-item "><a href="../../posts/angular/read_json_angular.html"><strong aria-hidden="true">15.6.</strong> read json angular</a></li><li class="chapter-item "><a href="../../posts/angular/same_route_reload.html"><strong aria-hidden="true">15.7.</strong> same route reload</a></li></ol></li><li class="chapter-item expanded "><a href="../../posts/css/css.html" class="active"><strong aria-hidden="true">16.</strong> Css</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/css/use_css_media.html"><strong aria-hidden="true">16.1.</strong> use css media</a></li></ol></li><li class="chapter-item "><a href="../../posts/php/php.html"><strong aria-hidden="true">17.</strong> Php</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/php/for_php_string_implment_some_extemtion_functions.html"><strong aria-hidden="true">17.1.</strong> for php string implment some extemtion functions</a></li><li class="chapter-item "><a href="../../posts/php/php_cheatsheet.html"><strong aria-hidden="true">17.2.</strong> PHP cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/windows/windows.html"><strong aria-hidden="true">18.</strong> Windows</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/windows/windows.html"><strong aria-hidden="true">18.1.</strong> Windows</a></li><li class="chapter-item "><a href="../../posts/windows/windows10_use_powershell_dedup_redundent_path.html"><strong aria-hidden="true">18.2.</strong> Windows10 use PowerShell dedup redundent PATH</a></li></ol></li><li class="chapter-item "><a href="../../posts/leetcode/leetcode.html"><strong aria-hidden="true">19.</strong> Leetcode</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/leetcode/rust_leetcode.html"><strong aria-hidden="true">19.1.</strong> rust leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_codewar.html"><strong aria-hidden="true">19.2.</strong> rust codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/swift_codewar.html"><strong aria-hidden="true">19.3.</strong> swift codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/js_leetcode.html"><strong aria-hidden="true">19.4.</strong> js leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/java_leetcode.html"><strong aria-hidden="true">19.5.</strong> java leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_huawei.html"><strong aria-hidden="true">19.6.</strong> huawei test</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_utils.html"><strong aria-hidden="true">19.7.</strong> rust common functions</a></li><li class="chapter-item "><a href="../../posts/leetcode/olympiad_training.html"><strong aria-hidden="true">19.8.</strong> Computer olympiad training</a></li></ol></li><li class="chapter-item "><a href="../../posts/ctf/CTF.html"><strong aria-hidden="true">20.</strong> CTF</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ctf/CTF_Note.html"><strong aria-hidden="true">20.1.</strong> CTF Note</a></li><li class="chapter-item "><a href="../../posts/ctf/0.1_Web.html"><strong aria-hidden="true">20.2.</strong> Web</a></li><li class="chapter-item "><a href="../../posts/ctf/4.1_Misc.html"><strong aria-hidden="true">20.3.</strong> Misc</a></li><li class="chapter-item "><a href="../../posts/ctf/3.2_PWN_note.html"><strong aria-hidden="true">20.4.</strong> PWN</a></li><li class="chapter-item "><a href="../../posts/ctf/3.1_Crypto.html"><strong aria-hidden="true">20.5.</strong> Crypto</a></li><li class="chapter-item "><a href="../../posts/ctf/3.4_RSA_note.html"><strong aria-hidden="true">20.6.</strong> Rsa attack</a></li><li class="chapter-item "><a href="../../posts/ctf/3.5_Base64.html"><strong aria-hidden="true">20.7.</strong> Base64</a></li><li class="chapter-item "><a href="../../posts/ctf/0.0_SQL Injection Cheatsheet.html"><strong aria-hidden="true">20.8.</strong> SQL Injection Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/ctf/1.1_SQL_injection.html"><strong aria-hidden="true">20.9.</strong> SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.2_SQL_injection_UNION_attacks.html"><strong aria-hidden="true">20.10.</strong> SQL Injection UNION attacks</a></li><li class="chapter-item "><a href="../../posts/ctf/1.3_Blind SQL injection.html"><strong aria-hidden="true">20.11.</strong> Blind SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.4_Code Injection.html"><strong aria-hidden="true">20.12.</strong> Code Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.5_SSRF.html"><strong aria-hidden="true">20.13.</strong> SSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.6_OS command injection.html"><strong aria-hidden="true">20.14.</strong> OS command injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.7_Local file inclusion.html"><strong aria-hidden="true">20.15.</strong> Local file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.8_Remote file inclusion.html"><strong aria-hidden="true">20.16.</strong> Remote file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.9_CSRFm.html"><strong aria-hidden="true">20.17.</strong> CSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.10_NoSQL injection.html"><strong aria-hidden="true">20.18.</strong> NoSQL injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.11_JSON injection.html"><strong aria-hidden="true">20.19.</strong> JSON injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.12_CTF_Web_SQL_Note.html"><strong aria-hidden="true">20.20.</strong> CTF Web SQL Note</a></li><li class="chapter-item "><a href="../../posts/ctf/2.1_XXE.html"><strong aria-hidden="true">20.21.</strong> XXE</a></li><li class="chapter-item "><a href="../../posts/ctf/2.2_XSS.html"><strong aria-hidden="true">20.22.</strong> XSS</a></li><li class="chapter-item "><a href="../../posts/ctf/2.3_Upload File.html"><strong aria-hidden="true">20.23.</strong> Upload File</a></li><li class="chapter-item "><a href="../../posts/ctf/2.4_serialize_unserialize.html"><strong aria-hidden="true">20.24.</strong> serialize unserialize</a></li><li class="chapter-item "><a href="../../posts/ctf/2.5_Race condition.html"><strong aria-hidden="true">20.25.</strong> Race condition</a></li><li class="chapter-item "><a href="../../posts/ctf/zip_plain_text_attack.html"><strong aria-hidden="true">20.26.</strong> Zip plain text attack</a></li><li class="chapter-item "><a href="../../posts/ctf/3.3_pwn HCTF2016 brop.html"><strong aria-hidden="true">20.27.</strong> pwn HCTF2016 brop</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_patch_defense_skill.html"><strong aria-hidden="true">20.28.</strong> PWN Patch defense skill</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_stack_overflow.html"><strong aria-hidden="true">20.29.</strong> PWN stack overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_heap_overflow.html"><strong aria-hidden="true">20.30.</strong> PWN heap overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_format_string_vulnerability.html"><strong aria-hidden="true">20.31.</strong> PWN Format String Vulnerability</a></li><li class="chapter-item "><a href="../../posts/ctf/kali_linux_tutorials.html"><strong aria-hidden="true">20.32.</strong> Kali linux tutorials</a></li><li class="chapter-item "><a href="../../posts/ctf/google_dorks_2023_lists.html"><strong aria-hidden="true">20.33.</strong> Google Dorks 2023 Lists</a></li><li class="chapter-item "><a href="../../posts/ctf/dvwa_writeup.html"><strong aria-hidden="true">20.34.</strong> DVWA WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/bwapp_writeup.html"><strong aria-hidden="true">20.35.</strong> bWAPP WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/sqlilabs_writeup.html"><strong aria-hidden="true">20.36.</strong> sqlilabs WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/pwnable_kr_challenge.html"><strong aria-hidden="true">20.37.</strong> Solutions for pwnable.kr</a></li><li class="chapter-item "><a href="../../posts/ctf/the_periodic_table.html"><strong aria-hidden="true">20.38.</strong> The Periodic Table</a></li><li class="chapter-item "><a href="../../posts/ctf/pwntools_cheatsheet.html"><strong aria-hidden="true">20.39.</strong> Pwntools Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/ctf/gdb_cheatsheet.html"><strong aria-hidden="true">20.40.</strong> GDB Cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/iltes/iltes.html"><strong aria-hidden="true">21.</strong> ILTES</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/iltes/iltes_writing.html"><strong aria-hidden="true">21.1.</strong> ILTES Writing</a></li></ol></li></ol>
            </div>
            <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
        </nav>

        <!-- Track and set sidebar scroll position -->
        <script>
            var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
            sidebarScrollbox.addEventListener('click', function(e) {
                if (e.target.tagName === 'A') {
                    sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
                }
            }, { passive: true });
            var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
            sessionStorage.removeItem('sidebar-scroll');
            if (sidebarScrollTop) {
                // preserve sidebar scroll position when navigating via links within sidebar
                sidebarScrollbox.scrollTop = sidebarScrollTop;
            } else {
                // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
                var activeSection = document.querySelector('#sidebar .active');
                if (activeSection) {
                    activeSection.scrollIntoView({ block: 'center' });
                }
            }
        </script>

        <div id="page-wrapper" class="page-wrapper">

            <div class="page">
                                <div id="menu-bar-hover-placeholder"></div>
                <div id="menu-bar" class="menu-bar sticky">
                    <div class="left-buttons">
                        <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                            <i class="fa fa-bars"></i>
                        </button>
                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                            <i class="fa fa-paint-brush"></i>
                        </button>
                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                        </ul>
                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>

                    <h1 class="menu-title">Andrew&#x27;s Blog</h1>

                    <div class="right-buttons">
                        <a href="https://gitee.com/dnrops/dnrops" title="Git repository" aria-label="Git repository">
                            <i id="git-repository-button" class="fa fa-github"></i>
                        </a>

                    </div>
                </div>

                <div id="search-wrapper" class="hidden">
                    <form id="searchbar-outer" class="searchbar-outer">
                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
                    </form>
                    <div id="searchresults-outer" class="searchresults-outer hidden">
                        <div id="searchresults-header" class="searchresults-header"></div>
                        <ul id="searchresults">
                        </ul>
                    </div>
                </div>

                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                <script>
                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
                    });
                </script>

                <div id="content" class="content">
                    <main>
                        <h1 id="css-note"><a class="header" href="#css-note">CSS Note</a></h1>
<ul>
<li>CSS 的单位</li>
<li>字体属性</li>
<li>文本属性</li>
<li>定位属性：position、float、overflow 等</li>
</ul>
<h2 id="css-的单位"><a class="header" href="#css-的单位">CSS 的单位</a></h2>
<p>html 中的单位只有一种，那就是像素 px，所以单位是可以省略的，但是在 CSS 中不一样。
<font color="#0000FF">CSS 中的单位是必须要写的，因为它没有默认单位。</font></p>
<h3 id="绝对单位"><a class="header" href="#绝对单位">绝对单位</a></h3>
<p>1 <code>in</code>=2.54<code>cm</code>=25.4<code>mm</code>=72<code>pt</code>=6<code>pc</code>。</p>
<p>各种单位的含义：</p>
<ul>
<li><code>in</code>：英寸 Inches (1 英寸 = 2.54 厘米)</li>
<li><code>cm</code>：厘米 Centimeters</li>
<li><code>mm</code>：毫米 Millimeters</li>
<li><code>pt</code>：点 Points，或者叫英镑 (1 点 = 1/72 英寸)</li>
<li><code>pc</code>：皮卡 Picas (1 皮卡 = 12 点)</li>
</ul>
<h3 id="相对单位"><a class="header" href="#相对单位">相对单位</a></h3>
<p><code>px</code>：像素 <code>em</code>：印刷单位相当于 12 个点 <code>%</code>：百分比，相对周围的文字的大小</p>
<p>为什么说像素 px
是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。</p>
<p>百分比<code>%</code>这个相对单位要怎么用呢？这里也举个例子：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-17.png" alt="" /></p>
<h2 id="font-字体属性"><a class="header" href="#font-字体属性">font 字体属性</a></h2>
<p>CSS 中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。</p>
<p>这一段，我们先来讲一下字体属性。</p>
<p>css 样式中，常见的字体属性有以下几种：</p>
<pre><code class="language-css">p {
  font-size: 50px; /*字体大小*/
  line-height: 30px; /*行高*/
  font-family: 幼圆, 黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
  font-style: italic; /*italic表示斜体，normal表示不倾斜*/
  font-weight: bold; /*粗体*/
  font-variant: small-caps; /*小写变大写*/
}
</code></pre>
<h3 id="行高"><a class="header" href="#行高">行高</a></h3>
<p>CSS 中，所有的行，都有行高。盒子模型的 padding，绝对不是直接作用在文字上的，而是作用在“行”上的。</p>
<p>如下图所示：</p>
<p><img src="http://img.smyhvae.com/20170808_2216.png" alt="" /></p>
<p>上图中，我们设置行高为 30px，30px * 5 = 150px，通过查看审查元素，这个 p 标签的高度果然为 150px。而且我们发现，我们并没有给这个
p 标签设置高度，显然是内容将其撑高的。</p>
<p>垂直方向来看，文字在自己的行里是居中的。比如，文字是 14px，行高是 24px，那么 padding 就是 5px：</p>
<p><img src="http://img.smyhvae.com/20170808_2220.png" alt="" /></p>
<p>为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被 2 整除。</p>
<h3 id="如何让单行文本垂直居中"><a class="header" href="#如何让单行文本垂直居中">如何让单行文本垂直居中</a></h3>
<p>小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。这个很好理解。</p>
<p>上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的 padding。计算方式如下：</p>
<p><img src="http://img.smyhvae.com/20170808_2240.png" alt="" /></p>
<h3 id="vertical-align-middle-属性"><a class="header" href="#vertical-align-middle-属性"><code>vertical-align: middle;</code> 属性</a></h3>
<p><code>vertical-align</code>属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。</p>
<p>代码举例：</p>
<pre><code class="language-css">vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
</code></pre>
<p>关于这一点，连 MDN 上都没我讲得详细。MDN 上的原话是 “vertical-align
用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。” MDN
上的这种描述是不完整的，漏掉了行内块元素（inline-block）。</p>
<h3 id="字号行高字体三大属性"><a class="header" href="#字号行高字体三大属性">字号、行高、字体三大属性</a></h3>
<p>（1）字号：</p>
<pre><code>font-size:14px;
</code></pre>
<p>（2）行高：</p>
<pre><code>line-height:24px;
</code></pre>
<p>（3）字体：（font-family 就是“字体”，family 是“家庭”的意思）</p>
<pre><code>font-family:&quot;宋体&quot;;
</code></pre>
<p>是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）</p>
<p>格式：</p>
<pre><code>font: 加粗 字号/行高/ 字体
</code></pre>
<p>举例：</p>
<pre><code>font: 400 14px/24px &quot;宋体&quot;;
</code></pre>
<p>PS：400 是 nomal，700 是 bold。</p>
<p>上面这几个属性可以连写，但是有一个要求，font 属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。</p>
<p>2、字体属性的说明：</p>
<p>（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：</p>
<pre><code>font-family: &quot;华文彩云&quot;;
</code></pre>
<p>上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。</p>
<p>页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。</p>
<p>（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）</p>
<pre><code>font-family: &quot;微软雅黑&quot;,&quot;宋体&quot;;
</code></pre>
<p>上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。</p>
<p>（3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：</p>
<pre><code>font-family: &quot;Times New Roman&quot;,&quot;微软雅黑&quot;,&quot;宋体&quot;;
</code></pre>
<p>上方代码的意思是，英文会采用 Times New Roman 字体，而中文会采用微软雅黑字体（因为美国人设计的 Times New Roman
字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于<code>smyhvae哈哈哈</code>这段文字，<code>smyhvae</code>会采用 Times New Roman
字体，而<code>哈哈哈</code>会采用微软雅黑字体。</p>
<p>可是，如果我们把中文字体写在前面：(错误写法)</p>
<pre><code>font-family: &quot;微软雅黑&quot;,&quot;Times New Roman&quot;,&quot;宋体&quot;;
</code></pre>
<p>上方代码会导致，中文和英文都会采用微软雅黑字体。</p>
<p>（4）所有的中文字体，都有英语别名。</p>
<p>微软雅黑的英语别名：</p>
<pre><code>font-family: &quot;Microsoft YaHei&quot;;
</code></pre>
<p>宋体的英语别名：</p>
<pre><code>font-family: &quot;SimSun&quot;;
</code></pre>
<p>于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：</p>
<pre><code>font:12px/30px  &quot;Times New Roman&quot;,&quot;Microsoft YaHei&quot;,&quot;SimSun&quot;;
</code></pre>
<p>（5）行高可以用百分比，表示字号的百分之多少。</p>
<p>一般来说，百分比都是大于 100%的，因为行高一定要大于字号。</p>
<p>比如说， <code>font:12px/200% “宋体”</code>等价于<code>font:12px/24px “宋体”</code>。<code>200%</code>可以理解成 word 里面的 2 倍行高。</p>
<p>反过来， <code>font:16px/48px “宋体”;</code>等价于<code>font:16px/300% “宋体”</code>。</p>
<h3 id="字体加粗属性"><a class="header" href="#字体加粗属性">字体加粗属性</a></h3>
<pre><code class="language-css">.div {
  font-weight: normal; /*正常*/
  font-weight: bold; /*加粗*/
  font-weight: 100;
  font-weight: 200;
  font-weight: 900;
}
</code></pre>
<p>在设置字体是否加粗时，属性值既可以填写<code>normal</code>、<code>bold</code>这样的加粗字体，也可以直接填写 100 至 900 这样的数字。<code>normal</code>的值相当于
400，<code>bold</code>的值相当于 700。</p>
<h2 id="文本属性"><a class="header" href="#文本属性">文本属性</a></h2>
<p>CSS 样式中，常见的文本属性有以下几种：</p>
<ul>
<li><code>letter-spacing: 0.5cm ;</code> 单个字母之间的间距</li>
<li><code>word-spacing: 1cm;</code> 单词之间的间距</li>
<li><code>text-decoration: none;</code> 字体修饰：none 去掉下划线、underline 下划线、line-through
中划线、overline 上划线</li>
<li><code>text-transform: lowercase;</code> 单词字体大小写。uppercase 大写、lowercase 小写</li>
<li><code>color:red;</code> 字体颜色</li>
<li><code>text-align: center;</code>
在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">在当前容器的中间</font>）、justify</li>
<li><code>text-transform: lowercase;</code>
单词的字体大小写。属性值可以是：<code>uppercase</code>（单词大写）、<code>lowercase</code>（单词小写）、<code>capitalize</code>（每个单词的首字母大写）</li>
</ul>
<p>这里来一张表格的图片吧，一览无遗：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-18.png" alt="" /></p>
<h2 id="列表属性"><a class="header" href="#列表属性">列表属性</a></h2>
<pre><code class="language-css">ul li {
  list-style-image: url(images/2.gif); /*列表项前设置为图片*/
  margin-left: 80px; /*公有属性*/
}
</code></pre>
<p>另外还有一个简写属性叫做<code>list-style</code>，它的作用是：将上面的多个属性写在一个声明中。</p>
<p>我们来看一下<code>list-style-image</code>属性的效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-23.png" alt="" /></p>
<p>给列表前面的图片加个边距吧，不然显示不完整：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-24_2.png" alt="" /></p>
<p>这里来一张表格的图片吧，一览无遗：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-26.png" alt="" /></p>
<h2 id="overflow-属性超出范围的内容要怎么处理"><a class="header" href="#overflow-属性超出范围的内容要怎么处理">overflow 属性：超出范围的内容要怎么处理</a></h2>
<p><code>overflow</code>属性的属性值可以是：</p>
<ul>
<li><code>visible</code>：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。</li>
<li><code>hidden</code>：不显示超过对象尺寸的内容。</li>
<li><code>auto</code>：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。</li>
<li><code>scroll</code>：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 <code>auto</code> 属性相同。</li>
</ul>
<p>针对上面的不同的属性值，我们来看一下效果： 举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;Generator&quot; content=&quot;EditPlus®&quot; /&gt;
    &lt;meta name=&quot;Author&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Keywords&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Description&quot; content=&quot;&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;

    &lt;style type=&quot;text/css&quot;&gt;
      div {
        width: 100px;
        height: 100px;
        background-color: #00cc66;
        margin-right: 100px;
        float: left;
      }

      #div1 {
        overflow: auto; /*超出的部分让浏览器自行解决*/
      }
      #div2 {
        overflow: visible; /*超出的部分会显示出来*/
      }

      #div3 {
        overflow: hidden; /*超出的部分将剪切掉*/
      }
    &lt;/style&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div id=&quot;div1&quot;&gt;
      其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观
      隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
    &lt;/div&gt;
    &lt;div id=&quot;div2&quot;&gt;
      其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观
      隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
    &lt;/div&gt;
    &lt;div id=&quot;div3&quot;&gt;
      其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观
      隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-31.png" alt="" /></p>
<h2 id="鼠标的属性-cursor"><a class="header" href="#鼠标的属性-cursor">鼠标的属性 cursor</a></h2>
<p>鼠标的属性<code>cursor</code>有以下几个属性值：</p>
<ul>
<li><code>auto</code>：默认值。浏览器根据当前情况自动确定鼠标光标类型。</li>
<li><code>pointer</code>：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。</li>
<li><code>hand</code>：和<code>pointer</code>的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。</li>
</ul>
<p>比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：</p>
<pre><code class="language-html">p:hover{ cursor: pointer; }
</code></pre>
<p>另外还有以下的属性：（不用记，需要的时候查一下就行了）</p>
<ul>
<li>all-scroll :　 IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。</li>
<li>col-resize :　 IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。</li>
<li>crosshair :　 简单的十字线光标。</li>
<li>default :　 客户端平台的默认光标。通常是一个箭头。</li>
<li>hand :　 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。</li>
<li>move :　 十字箭头光标。用于标示对象可被移动。</li>
<li>help :　 带有问号标记的箭头。用于标示有帮助信息存在。</li>
<li>no-drop :　 IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。</li>
<li>not-allowed :　 IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。</li>
<li>progress :　 IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。</li>
<li>row-resize :　 IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。</li>
<li>text :　 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。</li>
<li>vertical-text :　 IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转 90 度的形状。</li>
<li>wait :　 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。</li>
<li>*-resize :　 用于标示对象可被改变尺寸方向的箭头光标。</li>
<li>w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize</li>
<li>url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。</li>
</ul>
<h2 id="滤镜"><a class="header" href="#滤镜">滤镜</a></h2>
<p>这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜：</p>
<pre><code class="language-html">&lt;img src=&quot;3.jpg&quot; style=&quot;filter:gray()&quot; /&gt;
</code></pre>
<p>举例代码：</p>
<pre><code class="language-html">&lt;body&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;原始图片&lt;/td&gt;
      &lt;td&gt;图片加入黑白效果&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src=&quot;3.jpg&quot; /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img src=&quot;3.jpg&quot; style=&quot;filter:gray()&quot; /&gt;&lt;/td&gt;
      /*滤镜：设置图片为灰白效果*/
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
</code></pre>
<p>效果如下：（IE 有效果，google 浏览器无效果）</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-36.png" alt="" /></p>
<p>延伸： 滤镜本身是平面设计中的知识。如果你懂一点 PS 的话···打开 PS 看看吧：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-38.png" alt="" /></p>
<p>爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···</p>
<h2 id="导航栏的制作本段内容请忽略"><a class="header" href="#导航栏的制作本段内容请忽略">导航栏的制作（本段内容请忽略）</a></h2>
<p>现在，我们利用 float 浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-34.png" alt="" /></p>
<p>代码：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;Generator&quot; content=&quot;EditPlus®&quot; /&gt;
    &lt;meta name=&quot;Author&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Keywords&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Description&quot; content=&quot;&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;

    &lt;style type=&quot;text/css&quot;&gt;
      ul {
        list-style: none; /*去掉列表前面的圆点*/
        width: 420px;
        height: 60px;
        background-color: black; /*设置整个导航栏的背景为灰色*/
      }

      li {
        float: left; /*平铺*/
        margin-right: 30px;
        margin-top: 16px;
      }

      a {
        text-decoration: none; /*去掉超链的下划线*/
        font-size: 20px;
        color: #bbbbbb; /*设置超链的字体为黑色*/
        font-family: 微软雅黑;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;博客园&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;新随笔&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;联系&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;订阅&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;管理&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>实现效果如下：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-35.png" alt="" /></p>
<p>国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。</p>
<blockquote>
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/8277895.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新前端的系列文章。欢迎在
GitHub 上关注我，一起入门和进阶前端。</p>
</blockquote>
<blockquote>
<p>以下是正文。</p>
</blockquote>
<h2 id="background-的常见背景属性"><a class="header" href="#background-的常见背景属性">background 的常见背景属性</a></h2>
<p>css2.1 中，常见的背景属性有以下几种：（经常用到，要记住）</p>
<ul>
<li>
<p><code>background-color:#ff99ff;</code> 设置元素的背景颜色。</p>
</li>
<li>
<p><code>background-image:url(images/2.gif);</code> 将图像设置为背景。</p>
</li>
<li>
<p><code>background-repeat: no-repeat;</code> 设置背景图片是否重复及如何重复，默认平铺满。（重要）</p>
<ul>
<li><code>no-repeat</code>不要平铺；</li>
<li><code>repeat-x</code>横向平铺；</li>
<li><code>repeat-y</code>纵向平铺。</li>
</ul>
</li>
<li>
<p><code>background-position:center top;</code> 设置背景图片在当前容器中的位置。</p>
</li>
<li>
<p><code>background-attachment:scroll;</code> 设置背景图片是否跟着滚动条一起移动。 属性值可以是：<code>scroll</code>（与 fixed
属性相反，默认属性）、<code>fixed</code>（背景就会被固定住，不会被滚动条滚走）。</p>
</li>
<li>
<p>另外还有一个综合属性叫做<code>background</code>，它的作用是：将上面的多个属性写在一个声明中。</p>
</li>
</ul>
<p>CSS3 中，新增了一些 background 属性：</p>
<ul>
<li>
<p>background-origin</p>
</li>
<li>
<p>background-clip 背景裁切</p>
</li>
<li>
<p>background-size 调整尺寸</p>
</li>
<li>
<p>多重背景</p>
</li>
</ul>
<p>上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。</p>
<h2 id="background-color背景颜色的表示方法"><a class="header" href="#background-color背景颜色的表示方法">background-color：背景颜色的表示方法</a></h2>
<p>css2.1 中，颜色的表示方法有三种：单词、rgb 表示法、十六进制表示法。</p>
<p>比如红色可以有下面的三种表示方法：</p>
<pre><code class="language-css">background-color: red;
background-color: rgb(255, 0, 0);
background-color: #ff0000;
</code></pre>
<p>CSS3 中，有一种新的表示颜色的方式：RGBA 或者 HSLA。</p>
<p>RGBA、HSLA 可应用于所有使用颜色的地方。</p>
<p>下面分别介绍。</p>
<h3 id="用英语单词表示"><a class="header" href="#用英语单词表示">用英语单词表示</a></h3>
<p>能够用英语单词来表述的颜色，都是简单颜色，比如 red、green、blue、orange、gray 等。代码举例：</p>
<pre><code class="language-css">background-color: red;
</code></pre>
<h3 id="rgb-表示法"><a class="header" href="#rgb-表示法">RGB 表示法</a></h3>
<p>RGB 表示三原色“红”red、“绿”green、“蓝”blue。</p>
<p>光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b 的值，每个值的取值范围 0~255，一共 256 个值。</p>
<p>比如红色：</p>
<pre><code class="language-css">background-color: rgb(255, 0, 0);
</code></pre>
<p>黑色：</p>
<pre><code class="language-css">background-color: rgb(0, 0, 0);
</code></pre>
<p>颜色可以叠加，比如黄色就是红色和绿色的叠加：</p>
<pre><code class="language-css">background-color: rgb(255, 255, 0);
</code></pre>
<h3 id="rgba-表示法"><a class="header" href="#rgba-表示法">RGBA 表示法</a></h3>
<pre><code class="language-javascript">    background-color: rgba(0, 0, 255, 0.3);

    border: 30px solid rgba(0, 255, 0, 0.3);
</code></pre>
<p>代码解释：</p>
<ul>
<li>
<p>RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。</p>
</li>
<li>
<p>R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。</p>
</li>
</ul>
<p>RGB 色彩模式：</p>
<ul>
<li>自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。</li>
<li>RGB 三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青。</li>
<li>在数字视频中，对 RGB 三基色各进行 8 位编码就构成了大约 1678 万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是 RGB 色彩模式。</li>
<li>RGB 各有 256 级(0-255)亮度，256 级的 RGB 色彩总共能组合出约 1678 万种色彩，即 256×256×256=16777216。</li>
</ul>
<h3 id="十六进制表示法"><a class="header" href="#十六进制表示法">十六进制表示法</a></h3>
<p>比如红色：</p>
<pre><code>background-color: #ff0000;
</code></pre>
<p>PS:所有用<code>#</code>开头的值，都是 16 进制的。</p>
<p>这里，我们就要学会 16 进制与 10 进制之间的转换。下面举几个例子。</p>
<p>问：16 进制中 28 等于 10 进制多少？ 答：2*16+8 = 40。</p>
<p>16 进制中的 af 等于 10 进制多少？ 答：10 * 16 + 15 = 175</p>
<p>所以，#ff0000 就等于 rgb(255,0,0)。</p>
<p><code>background-color: #123456;</code>等价于<code>background-color: rgb(18,52,86);</code></p>
<p>十六进制可以简化为 3 位，所有#aabbcc 的形式，能够简化为#abc。举例如下：</p>
<p>比如：</p>
<pre><code>background-color:#ff0000;
</code></pre>
<p>等价于：</p>
<pre><code>background-color:#f00;
</code></pre>
<p>比如：</p>
<pre><code>background-color:#112233;
</code></pre>
<p>等价于：</p>
<pre><code>background-color:#123;
</code></pre>
<p>但是，比如下面这个是无法简化的：</p>
<pre><code>background-color:#222333;
</code></pre>
<p>再比如，下面这个也是无法简化的：</p>
<pre><code>background-color:#123123;
</code></pre>
<p>几种常见的颜色简写可以记住。如下：</p>
<pre><code>#000   黑
#fff   白
#f00   红
#222   深灰
#333   灰
#ccc   浅灰
</code></pre>
<h3 id="hsla-表示法"><a class="header" href="#hsla-表示法">HSLA 表示法</a></h3>
<p>举例：</p>
<pre><code class="language-javascript">background-color: hsla(240,50%,50%,0.4);
</code></pre>
<p>解释：</p>
<ul>
<li>
<p><code>H</code> 色调，取值范围 0~360。0 或 360 表示红色、120 表示绿色、240 表示蓝色。</p>
</li>
<li>
<p><code>S</code> 饱和度，取值范围 0%~100%。值越大，越鲜艳。</p>
</li>
<li>
<p><code>L</code> 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。</p>
</li>
<li>
<p><code>A</code> 透明度，取值范围 0~1。</p>
</li>
</ul>
<p>如果不知道 H 的值该设置多少，我们不妨来看一下色盘：</p>
<p><img src="http://img.smyhvae.com/20180207_1545.png" alt="" /></p>
<p>推荐链接：<a href="http://www.uisdc.com/how-to-create-color-palettes">配色宝典</a></p>
<p>关于设置透明度的其他方式：</p>
<p>（1）<code>opacity: 0.3;</code> 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。</p>
<p>（2）<code>background: transparent;</code> 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。</p>
<h2 id="background-repeat属性"><a class="header" href="#background-repeat属性"><code>background-repeat</code>属性</a></h2>
<p><code>background-repeat:no-repeat;</code>设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：</p>
<ul>
<li><code>no-repeat</code>（不要平铺）</li>
<li><code>repeat-x</code>（横向平铺）</li>
<li><code>repeat-y</code>（纵向平铺）</li>
</ul>
<p>这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧：</p>
<p>（1）不加这个属性时：（即默认时）（背景图片会被平铺满）</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-19.png" alt="" /></p>
<p>PS：padding 的区域也是有背景图的。</p>
<p>（2）属性值为<code>no-repeat</code>（不要平铺）时：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-20.png" alt="" /></p>
<p>（3）属性值为<code>repeat-x</code>（横向平铺）时：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-21.png" alt="" /></p>
<p>其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有
1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。</p>
<p>在搜索引擎上搜“平铺背景”，就可以发现，周期性的图片可以采用此种方法进行平铺。</p>
<p>（4）属性值为<code>repeat-y</code>（纵向平铺）时：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-22.png" alt="" /></p>
<h2 id="background-position属性"><a class="header" href="#background-position属性"><code>background-position</code>属性</a></h2>
<p><code>background-position</code>属性指的是背景定位属性。公式如下：</p>
<p>在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。</p>
<p>1、用像素值描述属性值：</p>
<p>格式如下：</p>
<pre><code>background-position:向右偏移量 向下偏移量;
</code></pre>
<p>属性值可以是正数，也可以是负数。比如：<code>100px 200px</code>、<code>-50px -120px</code>。</p>
<p>举例如下：</p>
<p><img src="http://img.smyhvae.com/20170812_1643.png" alt="" /></p>
<p><img src="http://img.smyhvae.com/20170812_1645.png" alt="" /></p>
<p>2、用单词描述属性值：</p>
<p>格式如下：</p>
<pre><code>background-position: 描述左右的词 描述上下的词;
</code></pre>
<ul>
<li>描述左右的词：left、center、right</li>
<li>描述上下的词：top 、center、bottom</li>
</ul>
<p>比如说，<code>right center</code>表示将图片放到右边的中间；<code>center center</code>表示将图片放到正中间。</p>
<p>比如说，<code>bottom</code>表示图片的底边和父亲底边贴齐（好好理解）。</p>
<p>位置属性有很多使用场景的。我们来举两个例子。</p>
<p>场景 1：（大背景图）</p>
<p>打开“暗黑 3 台湾”的官网<a href="https://tw.battle.net/d3/zh/">https://tw.battle.net/d3/zh/</a>，可以看到官网的效果是比较炫的：</p>
<p><img src="http://img.smyhvae.com/20170812_1945.jpg" alt="" /></p>
<p>检查网页后，找到网站背景图片的
url：<a href="https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg">https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg</a>。背景图如下：</p>
<p><img src="http://img.smyhvae.com/20170812_1950.jpg" alt="" /></p>
<p>实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给 body 标签加如下属性即可：</p>
<pre><code>body{
    background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}
</code></pre>
<p>上方代码中，如果没加<code>background-position</code>这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。</p>
<p>场景 2：（通栏 banner）</p>
<p>很多网站的首页都会有 banner 图（网站最上方的全屏大图叫做「通栏 banner」），这种图要求横向的宽度特别大。比如说，设计师给你一张 1920*465
的超大 banner 图，如果我们把这个 banner 图作为 img
标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：</p>
<p><img src="http://img.smyhvae.com/20170813_1102.gif" alt="" /></p>
<p>正确的做法是，将 banner 图作为 div 的背景图，这样的话，背景图超出 div 的部分，会自动移溢出。需要给 div 设置的属性如下：</p>
<pre><code class="language-css">div {
  height: 465px;
  background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
  background-position: center top;
  background-repeat: no-repeat;
}
</code></pre>
<p>上方代码中，我们给 div 设置 height（高度为 banner 图的高度），不需要设置宽度（因为宽度会自动霸占整行）。效果如下：</p>
<p><img src="http://img.smyhvae.com/20170813_1119.gif" alt="" /></p>
<p>上图可以看出，将 banner 图作为 div 的背景后，banner 图会永远处于网页的正中间（水平方向来看）。</p>
<h2 id="background-attachment-属性"><a class="header" href="#background-attachment-属性">background-attachment 属性</a></h2>
<ul>
<li><code>background-attachment:scroll;</code> 设置背景图片是否固定。属性值可以是：
<ul>
<li><code>fixed</code>（背景就会被固定住，不会被滚动条滚走）。</li>
<li><code>scroll</code>（与 fixed 属性相反，默认属性）</li>
</ul>
</li>
</ul>
<p><code>background-attachment:fixed;</code>的效果如下：</p>
<p><img src="http://img.smyhvae.com/20170813_1158.gif" alt="" /></p>
<h3 id="background-综合属性"><a class="header" href="#background-综合属性">background 综合属性</a></h3>
<p>background 属性和 border
一样，是一个综合属性，可以将多个属性写在一起。(在<a href="http://www.cnblogs.com/smyhvae/p/7256371.html">盒子模型</a>这篇文章中专门讲到
border)</p>
<p>举例 1:</p>
<pre><code class="language-css">background: red url(1.jpg) no-repeat 100px 100px fixed;
</code></pre>
<p>等价于：</p>
<pre><code class="language-css">background-color: red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;
</code></pre>
<p>以后，我们可以用小属性层叠掉大属性。</p>
<p>上面的属性中，可以任意省略其中的一部分。</p>
<p>比如说，对于下面这样的属性：</p>
<pre><code class="language-css">background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20170813_1515.png" alt="" /></p>
<h2 id="background-size属性背景尺寸"><a class="header" href="#background-size属性背景尺寸"><code>background-size</code>属性：背景尺寸</a></h2>
<p><code>background-size</code>属性：设置背景图片的尺寸。</p>
<p>格式举例：</p>
<pre><code class="language-javascript">	/* 宽、高的具体数值 */
	background-size: 500px 500px;

	/* 宽高的百分比（相对于容器的大小） */
	background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;

	background-size: 100% auto;  //这个属性可以自己试验一下。

	/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
	background-size: cover;

	/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。  */
	background-size: contain;
</code></pre>
<p>这里我们对属性值 <code>cover</code> 和 <code>contain</code> 进行再次强调：</p>
<ul>
<li>
<p><code>cover</code>：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。</p>
</li>
<li>
<p><code>contain</code>：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域留白。</p>
</li>
</ul>
<p>代码举例：（这张图片本身的尺寸是 1080 * 1350）</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
      .img_wrap {
        display: flex;
      }

      .img {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background: url(http://img.smyhvae.com/20191006_1330.jpg) no-repeat;
        margin-right: 20px;
      }

      .div1 {
        background-size: cover;
      }
      .div2 {
        background-size: contain;
      }
    &lt;/style&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;section class=&quot;img_wrap&quot;&gt;
      &lt;div class=&quot;img div1&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;img div2&quot;&gt;&lt;/div&gt;
    &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20191006_1350.png" alt="" /></p>
<p>在上方代码的基础之上，再加一个 <code>background-position: center</code>属性之后，图片就会在容器里居中显示：</p>
<p><img src="http://img.smyhvae.com/20191006_1520.png" alt="" /></p>
<h2 id="背景原点background-origin-属性"><a class="header" href="#背景原点background-origin-属性">背景原点：<code>background-origin</code> 属性</a></h2>
<p><code>background-origin</code> 属性：控制背景从什么地方开始显示。</p>
<p>格式举例：</p>
<pre><code class="language-javascript">	/* 从 padding-box 内边距开始显示背景图 */
	background-origin: padding-box;           //默认值

	/* 从 border-box 边框开始显示背景图  */
	background-origin: border-box;

	/* 从 content-box 内容区域开始显示背景图  */
	background-origin: content-box;
</code></pre>
<p>如果属性值设置成了<code>border-box</code>，那边框部分也会显示图片哦。</p>
<p>如下图所示：</p>
<p><img src="http://img.smyhvae.com/20180207_2115.png" alt="" /></p>
<h2 id="background-clip属性设置元素的背景背景图片或颜色是否延伸到边框下面"><a class="header" href="#background-clip属性设置元素的背景背景图片或颜色是否延伸到边框下面"><code>background-clip</code>属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面</a></h2>
<p>格式举例：</p>
<p><code>background-clip: content-box;</code> 超出的部分，将裁剪掉。属性值可以是：</p>
<ul>
<li>
<p><code>border-box</code> 超出 border-box 的部分，将裁剪掉</p>
</li>
<li>
<p><code>padding-box</code> 超出 padding-box 的部分，将裁剪掉</p>
</li>
<li>
<p><code>content-box</code> 超出 content-box 的部分，将裁剪掉</p>
</li>
</ul>
<p>假设现在有这样的属性设置：</p>
<pre><code class="language-javascript">	background-origin: border-box;

	background-clip: content-box;
</code></pre>
<p>上方代码的意思是，背景图片从边框部分开始加载，但是呢，超出内容区域的部分将被裁减掉。</p>
<h2 id="同时设置多个背景"><a class="header" href="#同时设置多个背景">同时设置多个背景</a></h2>
<p>我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。</p>
<p>代码举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
      .box {
        height: 416px;
        border: 1px solid #000;
        margin: 100px auto;
        /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
        background: url(images/bg1.png) no-repeat left top, url(images/bg2.png)
            no-repeat right top, url(images/bg3.png) no-repeat right bottom, url(images/bg4.png)
            no-repeat left bottom, url(images/bg5.png) no-repeat center;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>实现效果如下：</p>
<p><img src="http://img.smyhvae.com/20180207_2140.gif" alt="" /></p>
<p>上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。</p>
<h2 id="渐变background-image"><a class="header" href="#渐变background-image">渐变：background-image</a></h2>
<p>渐变是 CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。</p>
<p>渐变分为：</p>
<ul>
<li>
<p>线性渐变：沿着某条直线朝一个方向产生渐变效果。</p>
</li>
<li>
<p>径向渐变：从一个中心点开始沿着四周产生渐变效果。</p>
</li>
<li>
<p>重复渐变。</p>
</li>
</ul>
<p>见下图：</p>
<p><img src="http://img.smyhvae.com/20180208_1140.png" alt="" /></p>
<h3 id="线性渐变"><a class="header" href="#线性渐变">线性渐变</a></h3>
<p>格式：</p>
<pre><code class="language-javascript">    background-image: linear-gradient(方向, 起始颜色, 终止颜色);

    background-image: linear-gradient(to right, yellow, green);
</code></pre>
<p>参数解释：</p>
<ul>
<li>方向可以是：<code>to left</code>、<code>to right</code>、<code>to top</code>、<code>to bottom</code>、角度<code>30deg</code>（指的是顺时针方向 30°）。</li>
</ul>
<p>格式举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
      div {
        width: 500px;
        height: 100px;
        margin: 10px auto;
        border: 1px solid #000;
      }

      /* 语法：
            linear-gradient(方向，起始颜色，终止颜色);
            方向：to left   to right  to top   to bottom 　角度　30deg
            起始颜色
            终止颜色
        */
      div:nth-child(1) {
        background-image: linear-gradient(to right, yellow, green);
      }

      /* 不写方向，表示默认的方向是：从上往下 */
      div:nth-child(2) {
        background-image: linear-gradient(yellow, green);
      }

      /* 方向可以指定角度 */
      div:nth-child(3) {
        width: 100px;
        height: 100px;
        background-image: linear-gradient(135deg, yellow, green);
      }

      /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
      div:nth-child(4) {
        background-image: linear-gradient(
          to right,
          yellow 0%,
          red 40%,
          green 70%,
          blue 100%
        );
      }

      /* 颜色之间，出现突变 */
      div:nth-child(5) {
        background-image: linear-gradient(
          45deg,
          yellow 0%,
          yellow 25%,
          blue 25%,
          blue 50%,
          red 50%,
          red 75%,
          green 75%,
          green 100%
        );
      }

      div:nth-child(6) {
        background-image: linear-gradient(
          to right,
          #000 0%,
          #000 25%,
          #fff 25%,
          #fff 50%,
          #000 50%,
          #000 75%,
          #fff 75%,
          #fff 100%
        );
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180207_2222.png" alt="" /></p>
<p>举例：按钮</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;CSS3 渐变&lt;/title&gt;
    &lt;style&gt;
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        padding: 0;
        background-color: #f8fcd4;
      }

      .nav {
        width: 800px;
        text-align: center;
        padding-top: 50px;
        margin: 0 auto;
      }

      /*设置按钮基本样式*/
      .nav a {
        display: inline-block;
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        border: 1px solid #e59500;
        background-color: #ffb700;
        background-image: linear-gradient(to bottom, #ffb700 0%, #ff8c00 100%);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;nav&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;导航1&lt;/a&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;导航2&lt;/a&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;导航3&lt;/a&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;导航4&lt;/a&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;导航5&lt;/a&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;导航6&lt;/a&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/20180207_2301.png" alt="" /></p>
<h3 id="径向渐变"><a class="header" href="#径向渐变">径向渐变</a></h3>
<p>格式：</p>
<pre><code>	background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);

	background-image: radial-gradient(100px at center,yellow ,green);
</code></pre>
<p>解释：围绕中心点做渐变，半径是 150px，从黄色到绿色做渐变。</p>
<p>中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。</p>
<p>当然，还有其他的各种参数。格式举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
      div {
        width: 250px;
        height: 250px;
        border: 1px solid #000;
        margin: 20px;
        float: left;
      }

      /*
            径向渐变：
            radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）;
            中心点位置：at  left  right  center bottom  top
        */

      /*辐射半径为100px，中心点在中间*/
      div:nth-child(1) {
        background-image: radial-gradient(100px at center, yellow, green);
      }

      /*中心点在左上角*/
      div:nth-child(3) {
        background-image: radial-gradient(at left top, yellow, green);
      }

      div:nth-child(2) {
        background-image: radial-gradient(at 50px 50px, yellow, green);
      }

      /*设置不同的颜色渐变*/
      div:nth-child(4) {
        background-image: radial-gradient(
          100px at center,
          yellow 0%,
          green 30%,
          blue 60%,
          red 100%
        );
      }

      /*如果辐射半径的宽高不同，那就是椭圆*/
      div:nth-child(5) {
        background-image: radial-gradient(100px 50px at center, yellow, green);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180207_2256.png" alt="" /></p>
<p>举例：利用径向渐变和边框圆角的属性，生成按钮。代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;CSS3 渐变&lt;/title&gt;
    &lt;style&gt;
      div:nth-child(1) {
        width: 200px;
        height: 200px;
        margin: 40px auto;
        border-radius: 100px;
        background-color: yellowgreen;
      }

      div:nth-child(2) {
        width: 200px;
        height: 200px;
        margin: 40px auto;
        border-radius: 100px;
        background-color: yellowgreen;
        background-image: radial-gradient(
          200px at 100px 100px,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.5)
        );
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180208_1133.png" alt="" /></p>
<p>上图中，给第二个 div 设置的透明度是从 0 到 0.5。如果设置的透明度是从 0 到 0，则样式无变化，和第一个 div 一样。如果设置的透明度是从 1 到
1，则盒子是全黑的。</p>
<h2 id="clip-path裁剪出元素的部分区域做展示"><a class="header" href="#clip-path裁剪出元素的部分区域做展示">clip-path：裁剪出元素的部分区域做展示</a></h2>
<p><code>clip-path</code>属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。</p>
<p>虽然<code>clip-path</code>不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。</p>
<p>举例：（鼠标悬停时，放大裁剪的区域）</p>
<pre><code class="language-css">.div1 {
  width: 320px;
  height: 320px;
  border: 1px solid red;
  background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
  background-size: cover;

  /* 裁剪出圆形区域 */
  clip-path: circle(50px at 100px 100px);
  transition: clip-path 0.4s;
}
.div1:hover {
  /* 鼠标悬停时，裁剪出更大的圆形 */
  clip-path: circle(80px at 100px 100px);
}
</code></pre>
<p><code>clip-path</code>属性的好处是，即使做了任何裁剪，容器的占位大小是不变的。比如上方代码中，容器的占位大小一直都是 320px *
320px。这样的话，也方便我们做一些动画效果。</p>
<p><code>clip-path: polygon()</code>举例：</p>
<p><img src="http://img.smyhvae.com/20191006_1430.png" alt="" /></p>
<p>另外，通过 <code>clip-path: (svg)</code> 可以导入 svg 矢量图，实现 iOS 图标的圆角。这里就不详细展开了。</p>
<blockquote>
<p>本文最初于 2015-10-03
发表于<a href="http://www.cnblogs.com/smyhvae/p/4853995.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新前端的系列文章。欢迎在
GitHub 上关注我，一起入门和进阶前端。</p>
</blockquote>
<h2 id="本文主要内容"><a class="header" href="#本文主要内容">本文主要内容</a></h2>
<ul>
<li>CSS 概述</li>
<li>CSS 和 HTML 结合的三种方式：<code>行内样式表</code>、<code>内嵌样式表</code>、<code>外部样式表</code></li>
<li>CSS 四种基本选择器：<code>标签选择器</code>、<code>类选择器</code>、<code>ID选择器</code>、<code>通用选择器</code></li>
<li>CSS 几种扩展选择器：<code>后代选择器</code>、<code>交集选择器</code>、<code>并集选择器</code></li>
<li>CSS 样式优先级</li>
</ul>
<h2 id="前言"><a class="header" href="#前言">前言</a></h2>
<h2 id="css-概述"><a class="header" href="#css-概述">CSS 概述</a></h2>
<p>CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS
将网页内容和显示样式进行分离，提高了显示功能。</p>
<p>css 的最新版本是 css3，我们目前学习的是 css2.1。 因为 css3 和 css2.1 不矛盾，必须先学 2.1 然后学 3。</p>
<p>接下来我们要讲一下为什么要使用 CSS。</p>
<p>HTML 的缺陷：</p>
<ol>
<li>不能够适应多种设备</li>
<li>要求浏览器必须智能化足够庞大</li>
<li>数据和显示没有分开</li>
<li>功能不够强大</li>
</ol>
<p>CSS 优点：</p>
<ol>
<li>使数据和显示分开</li>
<li>降低网络流量</li>
<li>使整个网站视觉效果一致</li>
<li>使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）</li>
</ol>
<p>比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给
css 提供各种各样的样式。</p>
<h3 id="css-的重点知识点"><a class="header" href="#css-的重点知识点">CSS 的重点知识点</a></h3>
<p>盒子模型、浮动、定位</p>
<h3 id="css-整体感知"><a class="header" href="#css-整体感知">CSS 整体感知</a></h3>
<p>我们先来看一段简单的 css 代码：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
      p {
        color: red;
        font-size: 30px;
        text-decoration: underline;
        font-weight: bold;
        text-align: center;
        font-style: italic;
      }
      h1 {
        color: blue;
        font-size: 50px;
        font-weight: bold;
        background-color: pink;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;我是大标题&lt;/h1&gt;
    &lt;p&gt;我是内容&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>解释如下：</p>
<p><img src="http://img.smyhvae.com/20170710_1605.png" alt="" /></p>
<p>我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。后面的课程中我们将知道，css 也可以写在单独的文件里面，现在我们先写在
style 标签里面。</p>
<p>如果在 sublime 中输入<code>&lt;st</code>或者<code>&lt;style</code>然后按 tab 键，可以自动生成的格式如下：（建议）</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;&lt;/style&gt;
</code></pre>
<p>type 表示“类型”，text 就是“纯文本”，css 也是纯文本。</p>
<p>但是，如果在 sublime 中输入<code>st</code>或者<code>style</code>然后按 tab 键，可以自动生成的格式如下：（不建议）</p>
<pre><code class="language-html">&lt;style&gt;&lt;/style&gt;
</code></pre>
<p>css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。</p>
<h2 id="css-语法"><a class="header" href="#css-语法">CSS 语法</a></h2>
<p>语法格式：（其实就是键值对）</p>
<pre><code class="language-html">选择器{ 属性名: 属性值; 属性名: 属性值; }
</code></pre>
<p>或者可以写成：</p>
<pre><code class="language-css">选择器 {
  k: v;
  k: v;
  k: v;
  k: v;
}
选择器 {
  k: v;
  k: v;
  k: v;
  k: v;
}
</code></pre>
<p>解释：</p>
<ul>
<li>选择器代表页面上的某类元素，选择器后一定是大括号。</li>
<li>属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。</li>
<li>冒号和属性值之间可以留一个空格（编程习惯的经验）。</li>
<li>如果一个属性有多个值的话，那么多个值用空格隔开。</li>
</ul>
<p>举例：</p>
<pre><code class="language-css">p {
  color: red;
}
</code></pre>
<p>完整版代码举例：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  p {
    font-weight: bold;
    font-style: italic;
    color: red;
  }
&lt;/style&gt;

&lt;body&gt;
  &lt;p&gt;洗白白&lt;/p&gt;
  &lt;p&gt;你懂得&lt;/p&gt;
  &lt;p&gt;我不会就这样轻易的狗带&lt;/p&gt;
&lt;/body&gt;
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-01.png" alt="" /></p>
<h3 id="css-代码的注释"><a class="header" href="#css-代码的注释">css 代码的注释</a></h3>
<p>格式：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  /*
		具体的注释
	*/

  p {
    font-weight: bold;
    font-style: italic;
    color: red;
  }
&lt;/style&gt;
</code></pre>
<p>注意：CSS 只有<code>/* */</code>这种注释，没有<code>//</code>这种注释。而且注释要写在<code>&lt;style&gt;</code>标签里面才算生效哦。</p>
<p>接下来，我们要开始真正地讲 css 的知识咯。</p>
<p>css 怎么学？CSS 有两个知识部分： 1） 选择器，怎么选； 2） 属性，样式是什么</p>
<h2 id="css-的一些简单常见的属性"><a class="header" href="#css-的一些简单常见的属性">CSS 的一些简单常见的属性</a></h2>
<blockquote>
<p>我们先来接触 CSS 的一些简单常见的属性，因为接下来需要用到。后期会专门用一篇文章来写 CSS 的属性。</p>
</blockquote>
<p>以下属性值中，括号中的内容表示 sublime 中的快捷键。</p>
<p>字体颜色：（c）</p>
<pre><code class="language-html">color:red;
</code></pre>
<p>color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制(后期详细讲)。</p>
<p>字号大小：（fos）</p>
<pre><code class="language-html">font-size:40px;
</code></pre>
<p>font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行。</p>
<p>背景颜色：（bgc）</p>
<pre><code class="language-html">background-color: blue;
</code></pre>
<p>background 就是“背景”。</p>
<p>加粗：（fwb）</p>
<pre><code class="language-html">font-weight: bold;
</code></pre>
<p>font 是“字体” weight 是“重量”的意思，bold 粗。</p>
<p>不加粗：（fwn）</p>
<pre><code class="language-html">font-weight: normal;
</code></pre>
<p>normal 就是正常的意思。</p>
<p>斜体：（fsi）</p>
<pre><code class="language-html">font-style: italic;
</code></pre>
<p>italic 就是“斜体”。</p>
<p>不斜体：（fsn）</p>
<pre><code class="language-html">font-style: normal;
</code></pre>
<p>下划线：（tdu）</p>
<pre><code class="language-html">text-decoration: underline;
</code></pre>
<p>decoration 就是“装饰”的意思。</p>
<p>没有下划线：（tdn）</p>
<pre><code class="language-html">text-decoration:none;
</code></pre>
<h2 id="css-和-html-结合的方式样式表"><a class="header" href="#css-和-html-结合的方式样式表">CSS 和 HTML 结合的方式（样式表）</a></h2>
<p>CSS 和 HTML 结合的方式，其实就是问你 css 的代码放在哪里比较合适。CSS
代码理论上的位置是任意的，但通常写在<code>&lt;style&gt;</code>标签里。只要是<code>&lt;style&gt;</code>标签里的代码，那就是 css 代码，浏览器就是这样来进行解析的。</p>
<p>CSS 和 HTML 的结合方式有 3 种：</p>
<ul>
<li>行内样式：在某个特定的标签里采用 style 属性。范围只针对此标签。</li>
<li>内嵌样式表：在页面的 head 里采用<code>&lt;style&gt;</code>标签。范围针对此页面。</li>
<li>引入外部样式表 css 文件的方式。这种引入方式又分为两种： -
1、采用<code>&lt;link&gt;</code>标签。例如：<code>&lt;link rel = &quot;stylesheet&quot; type = &quot;text/css&quot; href = &quot;a.css&quot;&gt;&lt;/link&gt;</code> -
2、采用 import，必须写在<code>&lt;style&gt;</code>标签中，并且必须是第一句。例如：<code>@import url(a.css) ;</code></li>
</ul>
<blockquote>
<p>两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。</p>
</blockquote>
<p>下面来详细的讲一讲这三种方式。</p>
<h3 id="1css-和-html-结合方式一行内样式"><a class="header" href="#1css-和-html-结合方式一行内样式">1、CSS 和 HTML 结合方式一：行内样式</a></h3>
<p>采用 style 属性。范围只针对此标签适用。</p>
<p>该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。</p>
<p>举例：</p>
<pre><code class="language-html">&lt;p style=&quot;color:white;background-color:red&quot;&gt;我不会就这样轻易的狗带&lt;/p&gt;
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-02.png" alt="" /></p>
<h3 id="2css-和-html-结合方式二内嵌样式表"><a class="header" href="#2css-和-html-结合方式二内嵌样式表">2、CSS 和 HTML 结合方式二：内嵌样式表</a></h3>
<p>在 head 标签中加入<code>&lt;style&gt;</code>标签，对多个标签进行统一修改，范围针对此页面。</p>
<p>该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。</p>
<p>举例：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  p {
    font-weight: bold;
    font-style: italic;
    color: red;
  }
&lt;/style&gt;

&lt;body&gt;
  &lt;p&gt;洗白白&lt;/p&gt;
  &lt;p style=&quot;color:blue&quot;&gt;你懂得&lt;/p&gt;
&lt;/body&gt;
</code></pre>
<p><img src="http://img.smyhvae.com/2015-10-03-css-03.png" alt="" /></p>
<h3 id="3css-和-html-结合方式三引入外部样式表-css-文件"><a class="header" href="#3css-和-html-结合方式三引入外部样式表-css-文件">3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件</a></h3>
<p>引入样式表文件的方式又分为两种：</p>
<ul>
<li>
<p>（1）采用<code>&lt;link&gt;</code>标签。例如：<code>&lt;link rel = &quot;stylesheet&quot; type = &quot;text/css&quot; href = &quot;a.css&quot;&gt;&lt;/link&gt;</code></p>
</li>
<li>
<p>（2）采用 import，必须写在<code>&lt;style&gt;</code>标签中，并且必须是第一句。例如：<code>@import url(a.css) ;</code></p>
</li>
</ul>
<blockquote>
<p>两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。</p>
</blockquote>
<p>具体操作如下：</p>
<p>我们先在 html 页面的同级目录下新建一个<code>a.css</code>文件，那说明这里面的代码全是 css 代码，此时就没有必要再写<code>&lt;style&gt;</code>标签这几个字了。
<code>a.css</code>的代码如下：</p>
<pre><code class="language-css">p {
  border: 1px solid red;
  font-size: 40px;
}
</code></pre>
<p>上方的 css 代码中，注意像素要带上 px 这个单位，不然不生效。 然后我们在 html 文件中通过<code>&lt;link&gt;</code>标签引入这个 css
文件就行了。效果如下：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-04.png" alt="" /></p>
<p>这里再讲一个补充的知识：<code>&lt;link&gt;</code>标签的 rel 属性：。其属性值有以下两种：</p>
<ul>
<li><code>stylesheet</code>：定义的样式表</li>
<li><code>alternate stylesheet</code>：候选的样式表</li>
</ul>
<p>看字面意思可能比较难理解，我们来举个例子，一下子就明白了。 举例：</p>
<p>现在我们来定义 3 个样式表：</p>
<p>a.css：定义一个实线的黑色边框</p>
<pre><code class="language-css">div {
  width: 200px;
  height: 200px;
  border: 3px solid black;
}
</code></pre>
<p>ba.css：蓝色的虚线边框</p>
<pre><code class="language-css">div {
  width: 200px;
  height: 200px;
  border: 3px dotted blue;
}
</code></pre>
<p>c.css：来个背景图片</p>
<pre><code class="language-css">div {
  width: 200px;
  height: 200px;
  border: 3px solid red;
  background-image: url(&quot;1.jpg&quot;);
}
</code></pre>
<p>然后我们在 html 文件中引用三个样式表：</p>
<pre><code class="language-html">&lt;link rel = &quot;stylesheet&quot; type = &quot;text/css&quot; href = &quot;a.css&quot;&gt;&lt;/link&gt;
&lt;link rel = &quot;alternate stylesheet&quot; type = &quot;text/css&quot; href = &quot;b.css&quot; title=&quot;第二种样式&quot;&gt;&lt;/link&gt;
&lt;link rel = &quot;alternate stylesheet&quot; type = &quot;text/css&quot; href = &quot;c.css&quot; title=&quot;第三种样式&quot;&gt;&lt;/link&gt;
</code></pre>
<p>上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title 属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在 IE 中打开网页）</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-05.gif" alt="" /></p>
<h2 id="css-的四种基本选择器"><a class="header" href="#css-的四种基本选择器">CSS 的四种基本选择器</a></h2>
<p>CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。</p>
<p>CSS 的选择器分为两大类：基本选择题和扩展选择器。</p>
<p>基本选择器：</p>
<ul>
<li>标签选择器：针对一类标签</li>
<li>ID 选择器：针对某一个特定的标签使用</li>
<li>类选择器：针对你想要的所有标签使用</li>
<li>通用选择器（通配符）：针对所有的标签都适用（不建议使用）</li>
</ul>
<p>下面来分别讲一讲。</p>
<h3 id="1标签选择器选择器的名字代表-html-页面上的标签"><a class="header" href="#1标签选择器选择器的名字代表-html-页面上的标签">1、标签选择器：选择器的名字代表 html 页面上的标签</a></h3>
<p>标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。</p>
<p>举例：</p>
<pre><code class="language-html">p{ font-size:14px; }
</code></pre>
<p>上方选择器的意思是说：所有的<code>&lt;p&gt;</code>标签里的内容都将显示 14 号字体。</p>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-06.png" alt="" /></p>
<p>再比如说，我想让“生命壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用<code>&lt;span&gt;</code>标签把“前端”这两个字围起来，然后给<code>&lt;span&gt;</code>标签加一个标签选择器。</p>
<p>代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      span {
        color: red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;生命壹号学完了安卓，继续学&lt;span&gt;前端&lt;/span&gt;哟&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>【总结】需要注意的是：</p>
<p>（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。</p>
<p>（2）无论这个标签藏的多深，一定能够被选择上。</p>
<p>（3）选择的所有，而不是一个。</p>
<h3 id="2id-选择器规定用来定义"><a class="header" href="#2id-选择器规定用来定义">2、ID 选择器：规定用<code>#</code>来定义</a></h3>
<p>针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。</p>
<p>举例：</p>
<pre><code class="language-html">#mytitle{ border:3px dashed green; }
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-08.png" alt="" /></p>
<p>id 选择器的选择符是“#”。</p>
<p>任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：</p>
<ul>
<li>（1）只能有字母、数字、下划线。</li>
<li>（2）必须以字母开头。</li>
<li>（3）不能和标签同名。比如 id 不能叫做 body、img、a。</li>
</ul>
<p>另外，特别强调的是：HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的
div，是非法的！</p>
<p>一个标签可以被多个 css 选择器选择：</p>
<p>比如，我们可以同时让标签选择器和 id 选择器作用于同一个标签。如下：</p>
<p><img src="http://img.smyhvae.com/20170710_1737.png" alt="" /></p>
<p>然后我们通过网页的审查元素看一下效果：</p>
<p><img src="http://img.smyhvae.com/20170711_1540.png" alt="" /></p>
<p>现在，假设选择器冲突了，比如 id 选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？ 实际上，css 有着非常严格的计算公式，能够处理冲突.</p>
<p>一个标签可以被多个 css 选择器选择，共同作用，这就是“层叠式”的第一层含义（第一层含义和第二层含义，放到 css 基础的第三篇文章里讲）。</p>
<h3 id="3类选择器规定用圆点来定义"><a class="header" href="#3类选择器规定用圆点来定义">3、类选择器：规定用圆点<code>.</code>来定义</a></h3>
<p>、针对你想要的所有标签使用。优点：灵活。</p>
<p>css 中用<code>.</code>来表示类。举例如下：</p>
<pre><code class="language-html">.one{ width:800px; }
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-07.png" alt="" /></p>
<p>和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：</p>
<ul>
<li>
<p>特性 1：类选择器可以被多种标签使用。</p>
</li>
<li>
<p>特性 2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确）</p>
</li>
</ul>
<pre><code class="language-html">&lt;h3 class=&quot;teshu  zhongyao&quot;&gt;我是一个h3啊&lt;/h3&gt;
</code></pre>
<p>初学者常见的错误，就是写成了两个 class。举例如下：（错误）</p>
<pre><code class="language-html">&lt;h3 class=&quot;teshu&quot; class=&quot;zhongyao&quot;&gt;我是一个h3啊&lt;/h3&gt;
</code></pre>
<p>类选择器使用的举例：</p>
<p>类选择器的使用，能够决定一个人的 css 水平。</p>
<p>比如，我们现在要做下面这样一个页面：</p>
<p><img src="http://img.smyhvae.com/20170711_1639.png" alt="" /></p>
<p>正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应 css 里的代码如下：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  .lv {
    color: green;
  }
  .da {
    font-size: 30px;
  }
  .underline {
    text-decoration: underline;
  }
&lt;/style&gt;
</code></pre>
<p>然后让每个标签去选取自己想要用的类选择器：</p>
<pre><code class="language-html">&lt;p class=&quot;lv da&quot;&gt;段落1&lt;/p&gt;
&lt;p class=&quot;lv xian&quot;&gt;段落2&lt;/p&gt;
&lt;p class=&quot;da xian&quot;&gt;段落3&lt;/p&gt;
</code></pre>
<p>也就是说：</p>
<p>（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。</p>
<p>（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。</p>
<p>问题：到底用 id 还是用 class？</p>
<p>答案：尽可能的用 class，除非极特殊的情况可以用 id。</p>
<p>原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有
id 的元素，有动态效果。</p>
<p>举例如下：</p>
<p><img src="http://img.smyhvae.com/20170711_1706.png" alt="" /></p>
<p>上图所示，css 和 js 都在用同一个 id，会出现不好沟通的情况。</p>
<p>我们记住这句话：类上样式，id 上行为。意思是说，<code>class</code>属性交给 css 使用，<code>id</code>属性交给 js 使用。</p>
<p>上面这三种选择器的区别：</p>
<ul>
<li>标签选择器针对的是页面上的一类标签。</li>
<li>ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识。</li>
<li>类选择器可以被多种标签使用。</li>
</ul>
<h3 id="4通配符匹配任何标签"><a class="header" href="#4通配符匹配任何标签">4、通配符<code>*</code>：匹配任何标签</a></h3>
<p>通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。</p>
<p>效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。</p>
<p>举例：</p>
<pre><code class="language-css">* {
  margin-left: 0px;
  margin-top: 0px;
}
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-09.png" alt="" /></p>
<h2 id="css-的几种高级选择器"><a class="header" href="#css-的几种高级选择器">CSS 的几种高级选择器</a></h2>
<p>高级选择器：</p>
<ul>
<li>后代选择器：用空格隔开</li>
<li>交集选择器：选择器之间紧密相连</li>
<li>并集选择器（分组选择器）：用逗号隔开</li>
<li>伪类选择器</li>
</ul>
<p>下面详细讲一下这几种高级（扩展）选择器。</p>
<h3 id="1后代选择器-定义的时候用空格隔开"><a class="header" href="#1后代选择器-定义的时候用空格隔开">1、后代选择器: 定义的时候用空格隔开</a></h3>
<p>对于<code>E F</code>这种格式，表示所有属于 E 元素后代的 F 元素，有这个样式。空格就表示后代。</p>
<p>后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。</p>
<p>后代选择器，描述的是祖先结构。</p>
<p>看定义可能有点难理解，我们来看例子吧。</p>
<p>举例 1：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  .div1 p {
    color: red;
  }
&lt;/style&gt;
</code></pre>
<p>空格就表示后代。<code>.div1 p</code> 表示<code>.div1</code>的后代所有的<code>p</code>。</p>
<p>这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。</p>
<p>举例：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  h3 b i {
    color: red;
  }
&lt;/style&gt;
</code></pre>
<p>上方代码的意思是说：定义了<code>&lt;h3&gt;</code>标签中的<code>&lt;b&gt;</code>标签中的<code>&lt;i&gt;</code>标签的样式。 同理：h3 和 b 和 i
标签不一定是连续紧挨着的，只要保持一个后代的关联即可。</p>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-11.png" alt="" /></p>
<p>或者还有下面这种写法：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-12.png" alt="" /></p>
<p>上面的这种写法，<code>&lt;h3&gt;</code>标签和<code>&lt;i&gt;</code>标签并不是紧挨着的，但他们保持着一种后代关系。</p>
<p>还有下面这种写法：（含类选择器、id 选择器都是可以的）</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-13.png" alt="" /></p>
<p>我们在开头说了：后代选择器，描述的是一种祖先结构。我们举个例子来说明这句话：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      div div p {
        color: red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;div class=&quot;div2&quot;&gt;
        &lt;div class=&quot;div3&quot;&gt;
          &lt;div class=&quot;div4&quot;&gt;
            &lt;p&gt;我是什么颜色？&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>上面 css 中的<code>div div p</code>，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p 元素的祖先列表：</p>
<p><img src="http://img.smyhvae.com/20170711_1836.png" alt="" /></p>
<p>讲到这里，我们再提一个 sublme 的快捷键。</p>
<p>在 sublime 中输入<code>p#haha</code>，按 tab 键后，会生成<code>&lt;p id=&quot;haha&quot;&gt;&lt;/p&gt;</code>。</p>
<p>在 sublime 中输入<code>p.haha</code>，按 tab 键后，会生成<code>&lt;p class=&quot;haha&quot;&gt;&lt;/p&gt;</code>。</p>
<h3 id="2交集选择器定义的时候紧密相连"><a class="header" href="#2交集选择器定义的时候紧密相连">2、交集选择器：定义的时候紧密相连</a></h3>
<p>定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如<code>div.haha</code>，再比如<code>p.special</code>。</p>
<p>如果后一个选择器是类选择器，则写为<code>div.special</code>；如果后一个选择器 id 选择器，则写为<code>div#special</code>。</p>
<p>来看下面这张图就明白了：</p>
<p><img src="http://img.smyhvae.com/20170711_1851.png" alt="" /></p>
<pre><code class="language-css">h3.special {
  color: red;
}
</code></pre>
<p>选择的元素要求同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。</p>
<p>举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;交集选择器测试&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      h3.special {
        color: red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h3 class=&quot;special zhongyao&quot;&gt;标题1&lt;/h3&gt;
    &lt;h3 class=&quot;special&quot;&gt;我也是标题&lt;/h3&gt;
    &lt;p&gt;我是段落&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20170711_1852.png" alt="" /></p>
<p>注意，交集选择器没有空格。所以，没有空格的<code>div.red</code>（交集选择器）和有空格的<code>div .red</code>（后代选择器）不是一个意思。</p>
<p>交集选择器可以连续交：（一般不要这么写）</p>
<pre><code class="language-css">h3.special.zhongyao {
  color: red;
}
</code></pre>
<p>上面这种写法，是 IE7 开始兼容的，IE6 不兼容。</p>
<h3 id="3并集选择器定义的时候用逗号隔开"><a class="header" href="#3并集选择器定义的时候用逗号隔开">3、并集选择器：定义的时候用逗号隔开</a></h3>
<p>三种基本选择器都可以放进来。</p>
<p>举例：</p>
<pre><code class="language-css">p,
h1,
#mytitle,
.one {
  color: red;
}
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-10.png" alt="" /></p>
<h2 id="一些-css3-选择器"><a class="header" href="#一些-css3-选择器">一些 CSS3 选择器</a></h2>
<blockquote>
<p>所有的 CSS3 选择器，我们放在 CSS3 的内容里介绍。本文暂时先接触一部分。</p>
</blockquote>
<h3 id="浏览器的兼容性问题"><a class="header" href="#浏览器的兼容性问题">浏览器的兼容性问题</a></h3>
<blockquote>
<p>我们可以用<code>IETester</code>这个软件测一下 CSS 在各个版本 IE 浏览器上的显示效果。</p>
</blockquote>
<p>IE： 微软的浏览器，随着操作系统安装的。所以每个 windows 都有 IE 浏览器。各版本如下：</p>
<ul>
<li>windows xp 操作系统安装的 IE6</li>
<li>windows vista 操作系统安装的 IE7</li>
<li>windows 7 操作系统安装的 IE8</li>
<li>windows 8 操作系统安装的 IE9</li>
<li>windows10 操作系统安装的 edge</li>
</ul>
<p>浏览器兼容问题，要出，就基本上就是出在 IE6、7 身上，这两个浏览器是非常低级的浏览器。</p>
<p>为了测试浏览器 CSS 3 的兼容性，我们可以在网上搜“css3 机器猫“关键字，然后在不同的浏览器中打开如下链接：</p>
<ul>
<li><a href="http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/">http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/</a></li>
</ul>
<p>测试结果如下：</p>
<p><img src="http://img.smyhvae.com/20170711_1939.png" alt="" /></p>
<p>我们可以在<a href="http://tongji.baidu.com/data/">百度统计</a>里查看浏览器的市场占有率：</p>
<ul>
<li>IE9 5.94%</li>
<li>IE8 21.19%</li>
<li>IE7 4.79%</li>
<li>IE6 4.11%</li>
</ul>
<p>我们可以在<a href="http://html5test.com/results/desktop.html">http://html5test.com/results/desktop.html</a>中查看</p>
<p><img src="http://img.smyhvae.com/20170711_1948.png" alt="" /></p>
<p>我们要知道典型的 IE6 兼容问题（面试要问），但是做项目我们兼容到 IE8 即可。不解决 IE8 以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟
IE6 较劲。</p>
<p>我们可以用「IETester」软件看看 css 在各个浏览器中的显示效果。</p>
<h3 id="1子代选择器用符号表示"><a class="header" href="#1子代选择器用符号表示">1.子代选择器，用符号<code>&gt;</code>表示</a></h3>
<blockquote>
<p>IE7 开始兼容，IE6 不兼容。</p>
</blockquote>
<pre><code class="language-css">div &gt; p {
  color: red;
}
</code></pre>
<p>div 的儿子 p。和 div 的后代 p 的截然不同。</p>
<p>能够选择：</p>
<pre><code class="language-html">&lt;div&gt;
  &lt;p&gt;我是div的儿子&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>不能选择：</p>
<pre><code class="language-html">&lt;div&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;p&gt;我是div的重孙子&lt;/p&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
<h3 id="2序选择器"><a class="header" href="#2序选择器">2.序选择器</a></h3>
<blockquote>
<p>IE8 开始兼容；IE6、7 都不兼容</p>
</blockquote>
<p>设置无序列表<code>&lt;ul&gt;</code>中的第一个<code>&lt;li&gt;</code>为红色：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  ul li:first-child {
    color: red;
  }
&lt;/style&gt;
</code></pre>
<p>设置无序列表<code>&lt;ul&gt;</code>中的最后一个<code>&lt;li&gt;</code>为红色：</p>
<pre><code class="language-css">ul li:last-child {
  color: blue;
}
</code></pre>
<p>序选择器还有更复杂的用法，以后再讲。</p>
<p>由于浏览器的更新需要过程，所以现在如果公司还要求兼容 IE6、7，那么就要自己写类名：</p>
<pre><code class="language-html">&lt;ul&gt;
  &lt;li class=&quot;first&quot;&gt;项目&lt;/li&gt;
  &lt;li&gt;项目&lt;/li&gt;
  &lt;li&gt;项目&lt;/li&gt;
  &lt;li&gt;项目&lt;/li&gt;
  &lt;li&gt;项目&lt;/li&gt;
  &lt;li&gt;项目&lt;/li&gt;
  &lt;li&gt;项目&lt;/li&gt;
  &lt;li&gt;项目&lt;/li&gt;
  &lt;li&gt;项目&lt;/li&gt;
  &lt;li class=&quot;last&quot;&gt;项目&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>用类选择器来选择第一个或者最后一个：</p>
<pre><code class="language-html">ul li.first{ color:red; } ul li.last{ color:blue; }
</code></pre>
<h3 id="3下一个兄弟选择器"><a class="header" href="#3下一个兄弟选择器">3.下一个兄弟选择器</a></h3>
<blockquote>
<p>IE7 开始兼容，IE6 不兼容。</p>
</blockquote>
<p><code>+</code>表示选择下一个兄弟</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  h3 + p {
    color: red;
  }
&lt;/style&gt;
</code></pre>
<p>上方的选择器意思是：选择的是 h3 元素后面紧挨着的第一个兄弟。</p>
<pre><code class="language-html">&lt;h3&gt;我是一个标题&lt;/h3&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;h3&gt;我是一个标题&lt;/h3&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;h3&gt;我是一个标题&lt;/h3&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;p&gt;我是一个段落&lt;/p&gt;
&lt;h3&gt;我是一个标题&lt;/h3&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20170711_1950.png" alt="" /></p>
<p>这种选择器作用不大。</p>
<blockquote>
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/8280814.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新前端的系列文章。欢迎在
GitHub 上关注我，一起入门和进阶前端。</p>
</blockquote>
<blockquote>
<p>以下是正文。</p>
</blockquote>
<h2 id="伪类伪类选择器"><a class="header" href="#伪类伪类选择器">伪类（伪类选择器）</a></h2>
<p>伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。</p>
<p>比如 div 是属于 box 类，这一点很明确，就是属于 box 类。但是 a
属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。</p>
<h3 id="静态伪类和动态伪类"><a class="header" href="#静态伪类和动态伪类">静态伪类和动态伪类</a></h3>
<p>伪类选择器分为两种。</p>
<p>（1）静态伪类：只能用于超链接的样式。如下：</p>
<ul>
<li><code>:link</code> 超链接点击之前</li>
<li><code>:visited</code> 链接被访问过之后</li>
</ul>
<p>PS：以上两种样式，只能用于超链接。</p>
<p>（2）动态伪类：针对所有标签都适用的样式。如下：</p>
<ul>
<li><code>:hover</code> “悬停”：鼠标放到标签上的时候</li>
<li><code>:active</code> “激活”： 鼠标点击标签，但是不松手时。</li>
<li><code>:focus</code> 是某个标签获得焦点时的样式（比如某个输入框获得焦点）</li>
</ul>
<h2 id="超链接-a-标签"><a class="header" href="#超链接-a-标签">超链接 a 标签</a></h2>
<h3 id="超链接的四种状态"><a class="header" href="#超链接的四种状态">超链接的四种状态</a></h3>
<p>a 标签有 4 种伪类（即对应四种状态），要求背诵。如下：</p>
<ul>
<li><code>:link</code> “链接”：超链接点击之前</li>
<li><code>:visited</code> “访问过的”：链接被访问过之后</li>
<li><code>:hover</code> “悬停”：鼠标放到标签上的时候</li>
<li><code>:active</code> “激活”： 鼠标点击标签，但是不松手时。</li>
</ul>
<p>对应的代码如下：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  /*让超链接点击之前是红色*/
  a:link {
    color: red;
  }

  /*让超链接点击之后是绿色*/
  a:visited {
    color: orange;
  }

  /*鼠标悬停，放到标签上的时候*/
  a:hover {
    color: green;
  }

  /*鼠标点击链接，但是不松手的时候*/
  a:active {
    color: black;
  }
&lt;/style&gt;
</code></pre>
<p>记住，在 css 中，这四种状态必须按照固定的顺序写：</p>
<blockquote>
<p>a:link 、a:visited 、a:hover 、a:active</p>
</blockquote>
<p>如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。</p>
<p>看一下这四种状态的动图效果：</p>
<p><img src="http://img.smyhvae.com/20180113_2239.gif" alt="" /></p>
<h3 id="超链接的美化"><a class="header" href="#超链接的美化">超链接的美化</a></h3>
<p>问：既然<code>a{}</code>定义了超链的属性，和<code>a:link{}</code>定义了超链点击之前的属性，那这两个有啥区别呢？</p>
<p>答：</p>
<p><code>a{}</code>和<code>a:link{}</code>的区别：</p>
<ul>
<li><code>a{}</code>定义的样式针对所有的超链接(包括锚点)</li>
<li><code>a:link{}</code>定义的样式针对所有写了 href 属性的超链接(不包括锚点)</li>
</ul>
<p>超链接 a 标签在使用的时候，比较难。因为不仅仅要控制 a 这个盒子，也要控制它的伪类。</p>
<p>我们一定要将 a 标签写在前面，将<code>:link、:visited、:hover、:active</code>这些伪类写在后面。</p>
<p>针对超链接，我们来举个例子：</p>
<p><img src="http://img.smyhvae.com/20170810_2235.gif" alt="" /></p>
<p>为了实现上面这个效果，完整版代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        width: 960px;
        height: 50px;
        border: 1px solid red;
        margin: 100px auto;
      }
      .nav ul {
        /*去掉小圆点*/
        list-style: none;
      }
      .nav ul li {
        float: left;
        width: 120px;
        height: 50px;
        /*让内容水平居中*/
        text-align: center;
        /*让行高等于nav的高度，就可以保证内容垂直居中*/
        line-height: 50px;
      }
      .nav ul li a {
        display: block;
        width: 120px;
        height: 50px;
      }
      /*两个伪类的属性，可以用逗号隔开*/
      .nav ul li a:link,
      .nav ul li a:visited {
        text-decoration: none;
        background-color: purple;
        color: white;
      }
      .nav ul li a:hover {
        background-color: orange;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;nav&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网站栏目&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>上方代码中，我们发现，当我们在定义<code>a:link</code>和
<code>a:visited</code>这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下：</p>
<pre><code class="language-css">.nav ul li a {
  display: block;
  width: 120px;
  height: 50px;
}
/*两个伪类的属性，可以用逗号隔开*/
.nav ul li a:link,
.nav ul li a:visited {
  text-decoration: none;
  background-color: purple;
  color: white;
}
.nav ul li a:hover {
  background-color: orange;
}
</code></pre>
<p>如上方代码所示，最标准的写法，就是把 link、visited、hover 这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写
link、visited 也挺兼容。写法是：</p>
<blockquote>
<p>a:link、a:visited 都是可以省略的，简写在 a 标签里面。也就是说，a 标签涵盖了 link、visited
的状态（前提是都具有了相同的属性）。写法如下：</p>
</blockquote>
<pre><code class="language-css">.nav ul li a {
  display: block;
  width: 120px;
  height: 50px;
  text-decoration: none;
  background-color: purple;
  color: white;
}
.nav ul li a:hover {
  background-color: orange;
}
</code></pre>
<p>当然了，在写<code>a:link</code>、<code>a:visited</code>这两个伪类的时候，要么同时写，要么同时不写。如果只写<code>a</code>属性和<code>a:link</code>属性，不规范。</p>
<h2 id="动态伪类举例"><a class="header" href="#动态伪类举例">动态伪类举例</a></h2>
<p>我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。</p>
<ul>
<li><code>:hover</code> “悬停”：鼠标放到标签上的时候</li>
<li><code>:active</code> “激活”： 鼠标点击标签，但是不松手时。</li>
<li><code>:focus</code> 是某个标签获得焦点时的样式（比如某个输入框获得焦点）</li>
</ul>
<p>我们不妨来举下例子。</p>
<p>举例 1：</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  /*
	伪类选择器：动态伪类
  */

  /*
	让文本框获取焦点时：
	边框：#FF6F3D这种橙色
	文字：绿色
	背景色：#6a6a6a这种灰色
   */
  input:focus {
    border: 3px solid #ff6f3d;
    color: white;
    background-color: #6a6a6a;
  }

  /*
	鼠标放在标签上时显示蓝色
    */
  label:hover {
    color: blue;
  }

  /*
	点击标签鼠标没有松开时显示红色
    */
  label:active {
    color: red;
  }
&lt;/style&gt;
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-02.gif" alt="" /></p>
<p>利用这个<code>hover</code>属性，我们同样对表格做一个样式的设置： 表格举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;Generator&quot; content=&quot;EditPlus®&quot; /&gt;
    &lt;meta name=&quot;Author&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Keywords&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Description&quot; content=&quot;&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      /*整个表格的样式*/
      table {
        width: 300px;
        height: 200px;
        border: 1px solid blue;
        /*border-collapse属性：对表格的线进行折叠*/
        border-collapse: collapse;
      }

      /*鼠标悬停时，让当前行显示#868686这种灰色*/
      table tr:hover {
        background: #868686;
      }

      /*每个单元格的样式*/
      table td {
        border: 1px solid red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-04.gif" alt="" /></p>
<blockquote>
<p>本文最初于 2017-07-29
发表于<a href="http://www.cnblogs.com/smyhvae/p/7253929.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新前端的系列文章。欢迎在
GitHub 上关注我，一起入门和进阶前端。</p>
</blockquote>
<blockquote>
<p>以下是正文。</p>
</blockquote>
<h2 id="本文重点"><a class="header" href="#本文重点">本文重点</a></h2>
<ul>
<li>CSS 的继承性</li>
<li>CSS 的层叠性
<ul>
<li>计算权重</li>
<li>权重问题大总结</li>
<li>CSS 样式表的冲突的总结</li>
</ul>
</li>
<li>权重问题深入
<ul>
<li>同一个标签，携带了多个类名</li>
<li>!important 标记</li>
</ul>
</li>
</ul>
<h2 id="css-的继承性"><a class="header" href="#css-的继承性">CSS 的继承性</a></h2>
<p>我们来看下面这样的代码，来引入继承性：</p>
<p><img src="http://img.smyhvae.com/20170724_2359.png" alt="" /></p>
<p>上方代码中，我们给 div 标签增加红色属性，却发现，div 里的每一个子标签<code>&lt;p&gt;</code>也增加了红色属性。于是我们得到这样的结论：</p>
<blockquote>
<p>有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。</p>
</blockquote>
<p>继承性是从自己开始，直到最小的元素。</p>
<p>但是呢，如果再给上方的代码加一条属性：</p>
<p><img src="http://img.smyhvae.com/20170725_2122.jpg" alt="" /></p>
<p>上图中，我们给 div 加了一个 border，但是发现只有 div 具备了 border 属性，而 p 标签却没有 border 属性。于是我们可以得出结论：</p>
<ul>
<li>
<p>关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。</p>
</li>
<li>
<p>关于盒子、定位、布局的属性，都不能继承。</p>
</li>
</ul>
<p>以后当我们谈到 css 有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。</p>
<h2 id="css-的层叠性"><a class="header" href="#css-的层叠性">CSS 的层叠性</a></h2>
<p>很多公司如果要笔试，那么一定会考层叠性。</p>
<h3 id="层叠性计算权重"><a class="header" href="#层叠性计算权重">层叠性：计算权重</a></h3>
<p>层叠性：就是 css 处理冲突的能力。 所有的权重计算，没有任何兼容问题！</p>
<p>CSS 像艺术家一样优雅，像工程师一样严谨。</p>
<p>我们来看一个例子，就知道什么叫层叠性了。</p>
<p><img src="http://img.smyhvae.com/20170725_2132.png" alt="" /></p>
<p>上图中，三种选择器同时给 P 标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。</p>
<p>当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：</p>
<ul>
<li>id 选择器</li>
<li>类选择器、属性选择器、伪类选择器</li>
<li>标签选择器、伪元素选择器</li>
</ul>
<p>因为对于相同方式的样式表，其选择器排序的优先级为：ID 选择器 &gt; 类选择器 &gt; 标签选择器</p>
<p>针对上面这句话，我们接下来举一些复杂一点的例子。</p>
<h3 id="层叠性举例"><a class="header" href="#层叠性举例">层叠性举例</a></h3>
<h4 id="举例-1计算权重"><a class="header" href="#举例-1计算权重">举例 1：计算权重</a></h4>
<p><img src="http://img.smyhvae.com/20170725_2138.png" alt="" /></p>
<p>如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。</p>
<p>PS：不进位，实际上能进位（奇淫知识点：255 个标签，等于 1 个类名）但是没有实战意义！</p>
<h4 id="举例-2权重相同时"><a class="header" href="#举例-2权重相同时">举例 2：权重相同时</a></h4>
<p><img src="http://img.smyhvae.com/20170725_2250.png" alt="" /></p>
<p>上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。</p>
<h4 id="举例-3具有实战性的例子"><a class="header" href="#举例-3具有实战性的例子">举例 3：具有实战性的例子</a></h4>
<p><img src="http://img.smyhvae.com/20170726_2221.png" alt="" /></p>
<p>现在我要让一个列表实现上面的这种样式：第一个 li 为红色，剩下的 li 全部为蓝色。</p>
<p>如果写成下面这种代码是无法实现的：</p>
<p><img src="http://img.smyhvae.com/20170726_2225.png" alt="" /></p>
<p>无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。</p>
<p>正确的做法是：（非常重要）</p>
<p><img src="http://img.smyhvae.com/20170726_2229.png" alt="" /></p>
<p>上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：所有人当中，让某一个人为红，让其他所有人为蓝。</p>
<p>这种方式好用是好用，但用好很难。</p>
<p>就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。</p>
<p>上面这个例子很具有实战性。</p>
<h4 id="举例-4继承性造成的影响"><a class="header" href="#举例-4继承性造成的影响">举例 4：继承性造成的影响</a></h4>
<p>这里需要声明一点：</p>
<blockquote>
<p>如果不能直接选中某个元素，通过继承性影响的话，那么权重是 0。</p>
</blockquote>
<p>为了验证上面这句话，我们来看看下面这样的例子：</p>
<p><img src="http://img.smyhvae.com/20170727_0843.png" alt="" /></p>
<p>另外：如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的。举例如下：(box3 描述得最近，所以采用 box3 的属性)</p>
<p><img src="http://img.smyhvae.com/20190122_1530.png" alt="" /></p>
<p>上方代码的文字版如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;&quot;&gt;
  &lt;head&gt;
    &lt;meta /&gt;
    &lt;meta /&gt;
    &lt;meta /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
      #box1 {
        color: red;
      }

      #box2 {
        color: green;
      }

      #box3 {
        color: blue;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;box1&quot;&gt;
      &lt;div id=&quot;box2&quot;&gt;
        &lt;div id=&quot;box3&quot;&gt;&lt;p&gt;猜猜我是什么颜色&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="层叠性权重计算的问题大总结非常重要"><a class="header" href="#层叠性权重计算的问题大总结非常重要">层叠性：权重计算的问题大总结（非常重要）</a></h3>
<p>层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css 有着严格的处理冲突的机制。</p>
<p>通过列举上面几个例子，我们对权重问题做一个总结。</p>
<p><img src="http://img.smyhvae.com/20170727_2050.png" alt="" /></p>
<p>上面这个图非常重要，我们针对这个图做一个文字描述：</p>
<ul>
<li>选择上了，数权重，(id 的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。</li>
<li>没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。</li>
</ul>
<h3 id="css-样式表的冲突的总结"><a class="header" href="#css-样式表的冲突的总结">CSS 样式表的冲突的总结</a></h3>
<ul>
<li>1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 &gt; 内嵌样式表 &gt; 外部样式表（就近原则）</li>
<li>2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID 选择器 &gt; 类选择器 &gt; 标签选择器</li>
<li>3、外部样式表的 ID 选择器 &gt; 内嵌样式表的标签选择器</li>
</ul>
<blockquote>
<p>总结：就近原则。ID 选择器优先级最大。</p>
</blockquote>
<p>举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 &gt; 类选择器 &gt; 标签选择器）</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-14.png" alt="" /></p>
<p>另外还有两个冲突的情况：</p>
<ul>
<li>1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：定义的 CSS 样式表中，谁最近，就用谁。</li>
<li>2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html 文件中，引用样式表的位置越近，就用谁。</li>
</ul>
<p>例如：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-16.png" alt="" /></p>
<h3 id="题目演示"><a class="header" href="#题目演示">题目演示</a></h3>
<p>CSS 的层叠性讲完了，我们来做几个题目吧。</p>
<h4 id="题目-1"><a class="header" href="#题目-1">题目 1</a></h4>
<p><img src="http://img.smyhvae.com/20170727_0851.png" alt="" /></p>
<h4 id="题目-2"><a class="header" href="#题目-2">题目 2</a></h4>
<p><img src="http://img.smyhvae.com/20170727_0853.png" alt="" /></p>
<h4 id="题目-3"><a class="header" href="#题目-3">题目 3</a></h4>
<p><img src="http://img.smyhvae.com/20170727_0855.png" alt="" /></p>
<h4 id="题目-4"><a class="header" href="#题目-4">题目 4</a></h4>
<p><img src="http://img.smyhvae.com/20170727_0857.png" alt="" /></p>
<h2 id="权重问题深入"><a class="header" href="#权重问题深入">权重问题深入</a></h2>
<h3 id="同一个标签携带了多个类名有冲突"><a class="header" href="#同一个标签携带了多个类名有冲突">同一个标签，携带了多个类名，有冲突：</a></h3>
<p>这里需要补充两种冲突的情况：</p>
<ul>
<li>1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：定义的样式表中，谁最近，就用谁。</li>
<li>2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html 文件中，引用样式表的位置越近，就用谁。</li>
</ul>
<p>例如：（就近原则）</p>
<p><img src="http://img.smyhvae.com/20170727_2021.png" alt="" /></p>
<p>上图中，文字显示的颜色均为红色。因为这和在标签中的挂类名的书序无关，只和 css 的顺序有关。</p>
<h3 id="important-标记优先级最高"><a class="header" href="#important-标记优先级最高">!important 标记：优先级最高</a></h3>
<p>来看个很简单的例子：</p>
<p><img src="http://img.smyhvae.com/20170727_2029.png" alt="" /></p>
<p>上图中，显然 id 选择器的权重最大，所以文字的颜色是红色。</p>
<p>如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个<code>!important</code>标记，此时其权重为无穷大。如下：</p>
<p><img src="http://img.smyhvae.com/20170727_2035_2.png" alt="" /></p>
<p>important 是英语里面的“重要的”的意思。我们可以通过如下语法：</p>
<pre><code>k:v !important;
</code></pre>
<p>来给一个属性提高权重。这个属性的权重就是无穷大。</p>
<p>注意，一定要注意语法的正确性。</p>
<p>正确的语法：</p>
<pre><code>font-size:60px !important;
</code></pre>
<p>错误的语法：</p>
<pre><code>font-size:60px; !important;    不能把!important写在外面
font-size:60px important;      不能忘记感叹号
</code></pre>
<p><code>!important</code>标记需要强调如下 3 点：</p>
<p>（1）!important 提升的是一个属性，而不是一个选择器</p>
<pre><code class="language-css">p{
	color:red !important;    只写了这一个!important，所以只有字体颜色属性提升了权重
	font-size: 100px ;       这条属性没有写!important，所以没有提升权重
}
#para1{
	color:blue;
	font-size: 50px;
}
.spec{
	color:green;
	font-size: 20px;
}
</code></pre>
<p>所以，综合来看，字体颜色是 red（听 important 的）；字号是 50px（听 id 的）。</p>
<p>（2）!important 无法提升继承的权重，该是 0 还是 0</p>
<p>比如 HTML 结构：</p>
<pre><code class="language-html">&lt;div&gt;
  &lt;p&gt;哈哈哈哈哈哈哈哈&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>有 CSS 样式：</p>
<pre><code class="language-css">div {
  color: red !important;
}
p {
  color: blue;
}
</code></pre>
<p>由于 div 是通过继承性来影响文字颜色的，所以!important 无法提升它的权重，权重依然是 0。</p>
<p>干不过 p 标签，因为 p 标签是实实在在选中了，所以字是蓝色的（以 p 为准）。</p>
<p>(3)!important 不影响就近原则</p>
<p>如果大家都是继承来的，按理说应该按照“就近原则”，那么 important 能否影响就近原则呢？ 答案是：不影响。远的，永远是远的。不能给远的写一个
important，干掉近的。</p>
<p>为了验证这个问题，我们可以搞两层具有继承性的标签，然后给外层标签加一个!important，最终看看就近原则有没有被打破。举例如下：</p>
<p><img src="http://img.smyhvae.com/20170727_2046.png" alt="" /></p>
<p>PS：做网站的时候，!important 尽量不要用。否则会让 css 写的很乱。</p>
<h2 id="知识回顾"><a class="header" href="#知识回顾">知识回顾</a></h2>
<blockquote>
<p>我们把以上内容和上一篇文章做一个简单的知识回顾。</p>
</blockquote>
<h3 id="css-属性"><a class="header" href="#css-属性">CSS 属性</a></h3>
<blockquote>
<p>css 属性，面试的时候会有笔试，笔试没有智能提示的。</p>
</blockquote>
<p>加粗，倾斜，下划线：</p>
<pre><code>font-weight:bold;
font-style:italic;
text-decoration:underline;
</code></pre>
<p>背景颜色、前景色：</p>
<pre><code>background-color:red;
color:red;
</code></pre>
<h3 id="class-和-id-的区别"><a class="header" href="#class-和-id-的区别">class 和 id 的区别</a></h3>
<p>class 用于 css 的，id 用于 js 的。</p>
<p>1）class 页面上可以重复。id 页面上唯一，不能重复。 2）一个标签可以有多个 class，用空格隔开。但是 id 只能有 id。</p>
<h3 id="各种选择器浏览器兼容性"><a class="header" href="#各种选择器浏览器兼容性">各种选择器(浏览器兼容性)</a></h3>
<p>IE6 层面兼容的选择器： 标签选择器、id 选择器、类选择器、后代、交集选择器、并集选择器、通配符。如下：</p>
<pre><code>p
#box
.spec
div p
div.spec
div,p
*
</code></pre>
<p>IE7 能够兼容的：儿子选择器、下一个兄弟选择器。如下：</p>
<pre><code>div&gt;p
h3+p
</code></pre>
<p>IE8 能够兼容的：</p>
<pre><code>ul li:first-child
ul li:last-child
</code></pre>
<h3 id="css-两个性质"><a class="header" href="#css-两个性质">css 两个性质</a></h3>
<ul>
<li>
<p>继承性：好的事儿。继承从上到下，哪些能？哪些不能？</p>
</li>
<li>
<p>层叠性：冲突，多个选择器描述了同一个属性，听谁的？</p>
</li>
</ul>
<p>再看几个题目：</p>
<p><img src="http://img.smyhvae.com/20170727_0900.png" alt="" /></p>
<p><img src="http://img.smyhvae.com/20170727_0901.png" alt="" /></p>
<p><img src="http://img.smyhvae.com/20170727_0902.png" alt="" /></p>
<p><img src="http://img.smyhvae.com/20170727_0903.png" alt="" /></p>
<blockquote>
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/7256371.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新。以下是正文。</p>
</blockquote>
<h2 id="盒子模型"><a class="header" href="#盒子模型">盒子模型</a></h2>
<h3 id="前言-1"><a class="header" href="#前言-1">前言</a></h3>
<p>盒子模型，英文即 box model。无论是 div、span、还是 a 都是盒子。</p>
<p>但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。</p>
<h3 id="盒子中的区域"><a class="header" href="#盒子中的区域">盒子中的区域</a></h3>
<p>一个盒子中主要的属性就 5 个：width、height、padding、border、margin。如下：</p>
<ul>
<li>width 和 height：内容的宽度、高度（不是盒子的宽度、高度）。</li>
<li>padding：内边距。</li>
<li>border：边框。</li>
<li>margin：外边距。</li>
</ul>
<p>盒子模型的示意图：</p>
<p><img src="http://img.smyhvae.com/20170727_2128.png" alt="" /></p>
<p>代码演示：</p>
<p><img src="http://img.smyhvae.com/20170727_2326.png" alt="" /></p>
<p>上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是 302*302。 这是因为还要加上 padding、border。</p>
<p>注意：宽度和真实占有宽度，不是一个概念！来看下面这例子。</p>
<h3 id="标准盒模型和-ie-盒模型"><a class="header" href="#标准盒模型和-ie-盒模型">标准盒模型和 IE 盒模型</a></h3>
<blockquote>
<p>我们目前所学习的知识中，以标准盒子模型为准。</p>
</blockquote>
<p>标准盒子模型：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-27.jpg" alt="" /></p>
<p>IE 盒子模型：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-30.jpg" alt="" /></p>
<p>上图显示：</p>
<p>在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：</p>
<ul>
<li>width 和 height：内容的宽度、高度（不是盒子的宽度、高度）。</li>
<li>padding：内边距。</li>
<li>border：边框。</li>
<li>margin：外边距。</li>
</ul>
<p>CSS 盒模型和 IE 盒模型的区别：</p>
<ul>
<li>
<p>在 <font color="#0000FF">标准盒子模型</font>中，<font color="#0000FF">width 和 height
指的是内容区域</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。</p>
</li>
<li>
<p><font color="#0000FF">IE 盒子模型</font>中，<font color="#0000FF">width 和 height
指的是内容区域+border+padding</font>的宽度和高度。</p>
</li>
</ul>
<p>注：Android 中也有 margin 和 padding 的概念，意思是差不多的，如果你会一点 Android，应该比较好理解吧。区别在于，Android
中没有 border 这个东西，而且在 Android 中，margin 并不是控件的一部分，我觉得这样做更合理一些，呵呵。</p>
<h3 id="body标签也有-margin"><a class="header" href="#body标签也有-margin"><code>&lt;body&gt;</code>标签也有 margin</a></h3>
<p><code>&lt;body&gt;</code>标签有必要强调一下。很多人以为<code>&lt;body&gt;</code>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<code>&lt;document&gt;</code>，即浏览器。而<code>&lt;body&gt;</code>是<code>&lt;document&gt;</code>的儿子。浏览器给<code>&lt;body&gt;</code>默认的
margin 大小是 8 个像素，此时<code>&lt;body&gt;</code>占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;Generator&quot; content=&quot;EditPlus®&quot; /&gt;
    &lt;meta name=&quot;Author&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Keywords&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Description&quot; content=&quot;&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;

    &lt;style type=&quot;text/css&quot;&gt;
      div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        padding: 20px;
        margin: 30px;
      }
    &lt;/style&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div&gt;有生之年&lt;/div&gt;
    &lt;div&gt;狭路相逢&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>上面的代码中，我们对 div 标签设置了边距等信息。打开 google 浏览器，按住 F12，显示效果如下：</p>
<p><img src="http://img.smyhvae.com/20151003_27.png" alt="" /></p>
<h2 id="认识-widthheight"><a class="header" href="#认识-widthheight">认识 width、height</a></h2>
<p>一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。</p>
<p>比如说，丈量稿纸，前端开发工程师只会丈量内容宽度：</p>
<p><img src="http://img.smyhvae.com/20170727_2329.png" alt="" /></p>
<p>下面这两个盒子，真实占有宽高，都是 302*302：</p>
<p>盒子 1：</p>
<pre><code class="language-css">.box1 {
  width: 100px;
  height: 100px;
  padding: 100px;
  border: 1px solid red;
}
</code></pre>
<p>盒子 2：</p>
<pre><code class="language-css">.box2 {
  width: 250px;
  height: 250px;
  padding: 25px;
  border: 1px solid red;
}
</code></pre>
<p>真实占有宽度 = 左 border + 左 padding + width + 右 padding + 右 border</p>
<p>上面这两个盒子的盒模型图如下：</p>
<p><img src="http://img.smyhvae.com/20170728_0925.png" alt="" /></p>
<p>如果想保持一个盒子的真实占有宽度不变，那么加 width 的时候就要减 padding。加 padding 的时候就要减
width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。</p>
<h2 id="认识-padding"><a class="header" href="#认识-padding">认识 padding</a></h2>
<h3 id="padding-区域也有颜色"><a class="header" href="#padding-区域也有颜色">padding 区域也有颜色</a></h3>
<p>padding 就是内边距。padding 的区域有背景颜色，css2.1 前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color
将填充所有 border 以内的区域。</p>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20170728_1005.png" alt="" /></p>
<h3 id="padding-有四个方向"><a class="header" href="#padding-有四个方向">padding 有四个方向</a></h3>
<p>padding 是 4 个方向的，所以我们能够分别描述 4 个方向的 padding。</p>
<p>方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。</p>
<p>小属性的写法：</p>
<pre><code class="language-css">padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
</code></pre>
<p>综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin 的道理也是一样的）</p>
<pre><code class="language-css">padding: 30px 20px 40px 100px;
</code></pre>
<p>如果写了四个值，则顺序为：上、右、下、左。</p>
<p>如果只写了三个值，则顺序为：上、右、下。??和右一样。</p>
<p>如果只写了两个值，比如说：</p>
<pre><code>padding: 30px 40px;
</code></pre>
<p>则顺序等价于：30px 40px 30px 40px;</p>
<p>要懂得，用小属性层叠大属性。比如：</p>
<pre><code>padding: 20px;
padding-left: 30px;
</code></pre>
<p>上面的 padding 对应盒子模型为：</p>
<p><img src="http://img.smyhvae.com/20170728_1039.png" alt="" /></p>
<p>下面的写法：</p>
<pre><code>padding-left: 30px;
padding: 20px;
</code></pre>
<p>第一行的小属性无效，因为被第二行的大属性层叠掉了。</p>
<p>下面的题，会做了，说明你明白了。</p>
<h3 id="一些题目"><a class="header" href="#一些题目">一些题目</a></h3>
<p>题目 1：说出下面盒子真实占有宽高，并画出盒模型图。</p>
<pre><code class="language-css">div {
  width: 200px;
  height: 200px;
  padding: 10px 20px 30px;
  padding-right: 40px;
  border: 1px solid #000;
}
</code></pre>
<p>答案：</p>
<p><img src="http://img.smyhvae.com/20170728_1048.png" alt="" /></p>
<p>题目 2：说出下面盒子真实占有宽高，并画出盒模型图。</p>
<pre><code class="language-css">div {
  width: 200px;
  height: 200px;
  padding-left: 10px;
  padding-right: 20px;
  padding: 40px 50px 60px;
  padding-bottom: 30px;
  border: 1px solid #000;
}
</code></pre>
<p>答案：</p>
<p><code>padding-left:10px；</code> 和<code>padding-right:20px;</code> 没用，因为后面的 padding 大属性，层叠掉了他们。</p>
<p>盒子模型如下：</p>
<p><img src="http://img.smyhvae.com/20170728_1100.png" alt="" /></p>
<p>题目 3：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。</p>
<p><img src="http://img.smyhvae.com/20170728_1401.png" alt="" /></p>
<p>答案：</p>
<pre><code class="language-css">width: 123px;
height: 123px;
padding: 20px 40px;
border: 1px solid red;
</code></pre>
<p>题目 4：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。</p>
<p><img src="http://img.smyhvae.com/20170728_1402.png" alt="" /></p>
<p>答案：</p>
<pre><code class="language-css">width: 123px;
height: 123px;
padding: 20px;
padding-right: 40px;
border: 1px solid red;
</code></pre>
<h3 id="一些元素默认带有-padding"><a class="header" href="#一些元素默认带有-padding">一些元素，默认带有 padding</a></h3>
<p>一些元素，默认带有<code>padding</code>，比如 ul 标签。如下：</p>
<p><img src="http://img.smyhvae.com/20170728_1413.png" alt="" /></p>
<p>上图显示，不加任何样式的 ul，也是有 40px 的 padding-left。</p>
<p>所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的 padding。</p>
<p>可以使用<code>*</code>进行清除：</p>
<pre><code class="language-css">* {
  margin: 0;
  padding: 0;
}
</code></pre>
<p>但是，<code>*</code>的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：</p>
<pre><code>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
</code></pre>
<h2 id="认识-border"><a class="header" href="#认识-border">认识 border</a></h2>
<p>border 就是边框。边框有三个要素：像素（粗细）、线型、颜色。</p>
<p>比如：</p>
<pre><code class="language-css">.div1 {
  width: 10px;
  height: 10px;
  border: 2px solid red;
}
</code></pre>
<p>颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。</p>
<h3 id="border-style"><a class="header" href="#border-style">border-style</a></h3>
<p>border 的所有的线型如下：（我们可以通过查看<code>CSS参考手册</code>得到）</p>
<p><img src="http://img.smyhvae.com/20170728_1435.png" alt="" /></p>
<p>比如<code>border:10px ridge red;</code>这个属性，在 chrome 和 firefox、IE
中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）</p>
<p><img src="http://img.smyhvae.com/20170728_1619.png" alt="" /></p>
<p>如果公司里面的设计师是处女座的，追求极高的页面还原度，那么不能使用 css 来制作边框。就要用到图片，就要切图了。</p>
<p>所以，比较稳定的 border-style 就几个：solid、dashed、dotted。</p>
<h3 id="border-拆分"><a class="header" href="#border-拆分">border 拆分</a></h3>
<p>border 是一个大综合属性。比如说：</p>
<pre><code class="language-css">border: 1px solid red;
</code></pre>
<p>就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red 颜色。</p>
<p>PS：小技巧：在 sublime text 中，为了快速输入<code>border:1px solid red;</code>这个属性，可以直接输入<code>bd</code>，然后选第二个后回车。</p>
<p>border 属性是能够被拆开的，有两大种拆开的方式：</p>
<ul>
<li>
<p>（1）按三要素拆开：border-width、border-style、border-color。（一个 border 属性是由三个小属性综合而成的）</p>
</li>
<li>
<p>（2）按方向拆开：border-top、border-right、border-bottom、border-left。</p>
</li>
</ul>
<p>现在我们明白了：一个 border 属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：</p>
<pre><code>border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20170728_1516.png" alt="" /></p>
<p>（1）按三要素拆：</p>
<pre><code class="language-css">border-width: 10px; //边框宽度
border-style: solid; //线型
border-color: red; //颜色。
</code></pre>
<p>等价于：</p>
<pre><code>border:10px solid red;
</code></pre>
<p>(2)按方向来拆：</p>
<pre><code class="language-css">border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
</code></pre>
<p>等价于：</p>
<pre><code class="language-css">border: 10px solid red;
</code></pre>
<p>（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)</p>
<pre><code class="language-css">border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
border-right-width: 10px;
border-right-style: solid;
border-right-color: red;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: red;
border-left-width: 10px;
border-left-style: solid;
border-left-color: red;
</code></pre>
<p>等价于：</p>
<pre><code class="language-css">border: 10px solid red;
</code></pre>
<p>工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：</p>
<p><img src="http://img.smyhvae.com/20170728_1606.png" alt="" /></p>
<p>为了实现上方效果，写法如下：</p>
<pre><code class="language-css">border: 10px solid red;
border-right-color: blue;
</code></pre>
<p><img src="http://img.smyhvae.com/20170728_1608.png" alt="" /></p>
<p>为了实现上方效果，写法如下：</p>
<pre><code class="language-css">border: 10px solid red;
border-style: solid dashed;
</code></pre>
<p>border 可以没有：</p>
<pre><code class="language-css">border: none;
</code></pre>
<p>可以某一条边没有：</p>
<pre><code class="language-css">border-left: none;
</code></pre>
<p>也可以调整左边边框的宽度为 0：</p>
<pre><code class="language-css">border-left-width: 0;
</code></pre>
<h3 id="border-image-属性"><a class="header" href="#border-image-属性">border-image 属性</a></h3>
<p>比如：</p>
<pre><code class="language-css">border-image: url(.img.png) 30 round;
</code></pre>
<p>这个属性在实际开发中用得不多，暂时忽略。</p>
<h3 id="举例-1利用-border-属性画一个三角形小技巧"><a class="header" href="#举例-1利用-border-属性画一个三角形小技巧">举例 1：利用 border 属性画一个三角形（小技巧）</a></h3>
<p>完整代码如下：</p>
<pre><code class="language-css">div {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
  border-bottom: none;
}
</code></pre>
<p>步骤如下：</p>
<p>（1）当我们设置盒子的 width 和 height 为 0 时，此时效果如下：</p>
<p><img src="http://img.smyhvae.com/20170728_1639.png" alt="" /></p>
<p>（2）然后将 border 的底部取消：</p>
<p><img src="http://img.smyhvae.com/20170728_1645.png" alt="" /></p>
<p>（3）最后设置 border 的左边和右边为白色或者透明：</p>
<p><img src="http://img.smyhvae.com/20170728_1649.png" alt="" /></p>
<p>这样，一个三角形就画好了。</p>
<h3 id="举例-2利用-border-属性画一个三角形更推荐的技巧"><a class="header" href="#举例-2利用-border-属性画一个三角形更推荐的技巧">举例 2：利用 border 属性画一个三角形（更推荐的技巧）</a></h3>
<p>上面的例子 1 中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？</p>
<p>完整代码如下：（用 css 画等边三角形）</p>
<pre><code class="language-css">.div1 {
  width: 0;
  height: 0;
  border-top: 30px solid red;
  /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20191004_1830.png" alt="" /></p>
<p>另外，我们在上方代码的基础之上，再加一个 <code>border-radus: 20px;</code> 就能画出一个扇形。</p>
<p>关于盒模型的更多内容，请查看本项目的另外一篇文章：《13-前端面试/面试必看/02-CSS 盒模型及 BFC.md》</p>
<blockquote>
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/7297736.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新。以下是正文。</p>
</blockquote>
<h2 id="文本主要内容"><a class="header" href="#文本主要内容">文本主要内容</a></h2>
<ul>
<li>标准文档流
<ul>
<li>标准文档流的特性</li>
<li>行内元素和块级元素</li>
<li>行内元素和块级元素的相互转换</li>
</ul>
</li>
<li>浮动的性质</li>
<li>浮动的清除</li>
<li>浏览器的兼容性问题</li>
<li>浮动中 margin 相关</li>
<li>关于 margin 的 IE6 兼容问题</li>
</ul>
<h2 id="标准文档流"><a class="header" href="#标准文档流">标准文档流</a></h2>
<p>宏观地讲，我们的 web 页面和 photoshop 等设计软件有本质的区别：web
页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。</p>
<h3 id="标准文档流的特性"><a class="header" href="#标准文档流的特性">标准文档流的特性</a></h3>
<p><strong>（1）空白折叠现象：</strong></p>
<p>无论多少个空格、换行、tab，都会折叠为一个空格。</p>
<p>比如，如果我们想让 img 标签之间没有空隙，必须紧密连接：</p>
<pre><code>&lt;img src=&quot;images/0.jpg&quot; /&gt;&lt;img src=&quot;images/1.jpg&quot; /&gt;&lt;img src=&quot;images/2.jpg&quot; /&gt;
</code></pre>
<p><strong>（2）高矮不齐，底边对齐：</strong></p>
<p>举例如下：</p>
<p><img src="http://img.smyhvae.com/20170729_1508_2.png" alt="" /></p>
<p><strong>（3）自动换行，一行写不满，换行写。</strong></p>
<h3 id="行内元素和块级元素"><a class="header" href="#行内元素和块级元素">行内元素和块级元素</a></h3>
<p>学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：</p>
<ul>
<li>行内元素</li>
<li>块级元素</li>
</ul>
<p>我们可以举一个例子，看看块级元素和行内元素的区别：</p>
<p><img src="http://img.smyhvae.com/20170729_1529_2.png" alt="" /></p>
<p>上图中可以看到，<code>h1</code>标签是块级元素，占据了整行，<code>span</code>标签是行内元素，只占据内容这一部分。</p>
<p>现在我们尝试给两个标签设置宽高。效果如下：</p>
<p><img src="http://img.smyhvae.com/20170729_1532_2.png" alt="" /></p>
<p>上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素<code>h1</code>生效。于是我们可以做出如下总结。</p>
<p><strong>行内元素和块级元素的区别：</strong>（非常重要）</p>
<p>行内元素：</p>
<ul>
<li>与其他行内元素并排；</li>
<li>不能设置宽、高。默认的宽度，就是文字的宽度。</li>
</ul>
<p>块级元素：</p>
<ul>
<li>霸占一行，不能与其他任何元素并列；</li>
<li>能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的 100%。</li>
</ul>
<p><strong>行内元素和块级元素的分类：</strong></p>
<p>在以前的 HTML 知识中，我们已经将标签分过类，当时分为了：文本级、容器级。</p>
<p>从 HTML 的角度来讲，标签分为：</p>
<ul>
<li>文本级标签：p、span、a、b、i、u、em。</li>
<li>容器级标签：div、h 系列、li、dt、dd。</li>
</ul>
<blockquote>
<p>PS：为甚么说 p 是文本级标签呢？因为 p 里面只能放文字&amp;图片&amp;表单元素，p 里面不能放 h 和 ul，p 里面也不能放 p。</p>
</blockquote>
<p>现在，从 CSS 的角度讲，CSS 的分类和上面的很像，就 p 不一样：</p>
<ul>
<li>
<p>行内元素：除了 p 之外，所有的文本级标签，都是行内元素。p 是个文本级，但是是个块级元素。</p>
</li>
<li>
<p>块级元素：所有的容器级标签都是块级元素，还有 p 标签。</p>
</li>
</ul>
<p>我们把上面的分类画一个图，即可一目了然：</p>
<p><img src="http://img.smyhvae.com/20170729_1545.png" alt="" /></p>
<h3 id="行内元素和块级元素的相互转换"><a class="header" href="#行内元素和块级元素的相互转换">行内元素和块级元素的相互转换</a></h3>
<p>我们可以通过<code>display</code>属性将块级元素和行内元素进行相互转换。display 即“显示模式”。</p>
<h4 id="块级元素可以转换为行内元素"><a class="header" href="#块级元素可以转换为行内元素">块级元素可以转换为行内元素：</a></h4>
<p>一旦，给一个块级元素（比如 div）设置：</p>
<pre><code>display: inline;
</code></pre>
<p>那么，这个标签将立即变为行内元素，此时它和一个 span 无异。inline 就是“行内”。也就是说：</p>
<ul>
<li>此时这个 div 不能设置宽度、高度；</li>
<li>此时这个 div 可以和别人并排了。</li>
</ul>
<p>举例如下：</p>
<p><img src="http://img.smyhvae.com/20170729_1629.png" alt="" /></p>
<h4 id="行内元素转换为块级元素"><a class="header" href="#行内元素转换为块级元素">行内元素转换为块级元素：</a></h4>
<p>同样的道理，一旦给一个行内元素（比如 span）设置：</p>
<pre><code>display: block;
</code></pre>
<p>那么，这个标签将立即变为块级元素，此时它和一个 div 无异。block”是“块”的意思。也就是说：</p>
<ul>
<li>此时这个 span 能够设置宽度、高度</li>
<li>此时这个 span 必须霸占一行了，别人无法和他并排</li>
<li>如果不设置宽度，将撑满父亲</li>
</ul>
<p>举例如下：</p>
<p><img src="http://img.smyhvae.com/20170729_1638.png" alt="" /></p>
<p>标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！<strong>脱离标准流</strong>！</p>
<p>css 中一共有三种手段，使一个元素脱离标准文档流：</p>
<ul>
<li>（1）浮动</li>
<li>（2）绝对定位</li>
<li>（3）固定定位</li>
</ul>
<p>这便引出我们今天要讲的内容：浮动。</p>
<h2 id="浮动的性质"><a class="header" href="#浮动的性质">浮动的性质</a></h2>
<blockquote>
<p>浮动是 css 里面布局用的最多的属性。</p>
</blockquote>
<p>现在有两个 div，分别设置宽高。我们知道，它们的效果如下：</p>
<p><img src="http://img.smyhvae.com/20170729_1722.png" alt="" /></p>
<p>此时，如果给这两个 div 增加一个浮动属性，比如<code>float: left;</code>，效果如下：</p>
<p><img src="http://img.smyhvae.com/20170729_1723.png" alt="" /></p>
<p>这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。</p>
<p>浮动想学好，一定要知道三个性质。接下来讲一讲。</p>
<h3 id="性质-1浮动的元素脱标"><a class="header" href="#性质-1浮动的元素脱标">性质 1：浮动的元素脱标</a></h3>
<p>脱标即脱离标准流。我们来看几个例子。</p>
<p>证明 1：</p>
<p><img src="http://img.smyhvae.com/20170729_2028.png" alt="" /></p>
<p>上图中，在默认情况下，两个 div 标签是上下进行排列的。现在由于 float
属性让上图中的第一个<code>&lt;div&gt;</code>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<code>&lt;div&gt;</code>还在自己的层面上遵从标准流进行排列。</p>
<p>证明 2：</p>
<p><img src="http://img.smyhvae.com/20180111_2320.png" alt="" /></p>
<p>上图中，span 标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。</p>
<p>所以能够证明一件事：**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个 div 还是个
span。**所有标签，浮动之后，已经不区分行内、块级了。</p>
<h3 id="性质-2浮动的元素互相贴靠"><a class="header" href="#性质-2浮动的元素互相贴靠">性质 2：浮动的元素互相贴靠</a></h3>
<p>我们来看一个例子就明白了。</p>
<p>我们给三个 div 均设置了<code>float: left;</code>属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到 div 的贴靠效果：</p>
<p><img src="http://img.smyhvae.com/20170730_1910.gif" alt="" /></p>
<p>上图显示，3 号如果有足够空间，那么就会靠着 2 号。如果没有足够的空间，那么会靠着 1 号大哥。 如果没有足够的空间靠着 1 号大哥，3 号自己去贴左墙。</p>
<p>不过 3 号自己去贴墙的时候，注意：</p>
<p><img src="http://img.smyhvae.com/20170730_1928.gif" alt="" /></p>
<p>上图显示，3 号贴左墙的时候，并不会往 1 号里面挤。</p>
<p>同样，float 还有一个属性值是<code>right</code>，这个和属性值<code>left</code>是对称的。</p>
<h3 id="性质-3浮动的元素有字围效果"><a class="header" href="#性质-3浮动的元素有字围效果">性质 3：浮动的元素有“字围”效果</a></h3>
<p>来看一张图就明白了。我们让 div 浮动，p 不浮动。</p>
<p><img src="http://img.smyhvae.com/20170730_2005.png" alt="" /></p>
<p>上图中，我们发现：<strong>div 挡住了 p，但不会挡住 p 中的文字</strong>，形成“字围”效果。</p>
<p>总结：<strong>标准流中的文字不会被浮动的盒子遮挡住</strong>。（文字就像水一样）</p>
<p>关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：<strong>永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。</strong></p>
<h3 id="性质-4收缩"><a class="header" href="#性质-4收缩">性质 4：收缩</a></h3>
<p>收缩：一个浮动的元素，如果没有设置 width，那么将自动收缩为内容的宽度（这点非常像行内元素）。</p>
<p>举例如下：</p>
<p><img src="http://img.smyhvae.com/20170801_1720.png" alt="" /></p>
<p>上图中，div 本身是块级元素，如果不设置 width，它会单独霸占整行；但是，设置 div 浮动后，它会收缩</p>
<h3 id="浮动的补充做网站时注意"><a class="header" href="#浮动的补充做网站时注意">浮动的补充（做网站时注意）</a></h3>
<p><img src="http://img.smyhvae.com/20170731_2248.png" alt="" /></p>
<p>上图所示，将 para1 和 para2 设置为浮动，它们是 div 的儿子。此时 para1+para2 的宽度小于 div
的宽度。效果如上图所示。可如果设置 para1+para2 的宽度大于 div 的宽度，我们会发现，para2 掉下来了：</p>
<p><img src="http://img.smyhvae.com/20170731_2252_2.png" alt="" /></p>
<h3 id="布置一个作业"><a class="header" href="#布置一个作业">布置一个作业</a></h3>
<p>布置一个作业，要求实现下面的效果：</p>
<p><img src="http://img.smyhvae.com/20170801_0858.png" alt="" /></p>
<p>为实现上方效果，代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      * {
        margin: 0;
        padding: 0;
      }
      .header {
        width: 970px;
        height: 103px;
        /*居中。这个语句的意思是：居中：*/
        margin: 0 auto;
      }
      .header .logo {
        float: left;
        width: 277px;
        height: 103px;
        background-color: red;
      }
      .header .language {
        float: right;
        width: 137px;
        height: 49px;
        background-color: green;
        margin-bottom: 8px;
      }
      .header .nav {
        float: right;
        width: 679px;
        height: 46px;
        background-color: green;
      }

      .content {
        width: 970px;
        height: 435px;
        /*居中，这个语句今天没讲，你照抄，就是居中：*/
        margin: 0 auto;
        margin-top: 10px;
      }
      .content .banner {
        float: left;
        width: 310px;
        height: 435px;
        background-color: gold;
        margin-right: 10px;
      }
      .content .rightPart {
        float: left;
        width: 650px;
        height: 435px;
      }
      .content .rightPart .main {
        width: 650px;
        height: 400px;
        margin-bottom: 10px;
      }
      .content .rightPart .links {
        width: 650px;
        height: 25px;
        background-color: blue;
      }
      .content .rightPart .main .news {
        float: left;
        width: 450px;
        height: 400px;
      }
      .content .rightPart .main .hotpic {
        float: left;
        width: 190px;
        height: 400px;
        background-color: purple;
        margin-left: 10px;
      }
      .content .rightPart .main .news .news1 {
        width: 450px;
        height: 240px;
        background-color: skyblue;
        margin-bottom: 10px;
      }
      .content .rightPart .main .news .news2 {
        width: 450px;
        height: 110px;
        background-color: skyblue;
        margin-bottom: 10px;
      }
      .content .rightPart .main .news .news3 {
        width: 450px;
        height: 30px;
        background-color: skyblue;
      }
      .footer {
        width: 970px;
        height: 35px;
        background-color: pink;
        /*没学，就是居中：*/
        margin: 0 auto;
        margin-top: 10px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- 头部 --&gt;
    &lt;div class=&quot;header&quot;&gt;
      &lt;div class=&quot;logo&quot;&gt;logo&lt;/div&gt;
      &lt;div class=&quot;language&quot;&gt;语言选择&lt;/div&gt;
      &lt;div class=&quot;nav&quot;&gt;导航条&lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- 主要内容 --&gt;
    &lt;div class=&quot;content&quot;&gt;
      &lt;div class=&quot;banner&quot;&gt;大广告&lt;/div&gt;
      &lt;div class=&quot;rightPart&quot;&gt;
        &lt;div class=&quot;main&quot;&gt;
          &lt;div class=&quot;news&quot;&gt;
            &lt;div class=&quot;news1&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;news2&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;news3&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;hotpic&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;links&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- 页尾 --&gt;
    &lt;div class=&quot;footer&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>其实，这个页面的布局是下面这个网站：</p>
<p><img src="http://img.smyhvae.com/20170801_0900.png" alt="" /></p>
<h2 id="浮动的清除"><a class="header" href="#浮动的清除">浮动的清除</a></h2>
<blockquote>
<p>这里所说的清除浮动，指的是清除浮动与浮动之间的影响。</p>
</blockquote>
<h3 id="前言-2"><a class="header" href="#前言-2">前言</a></h3>
<p>通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。</p>
<p>比如说一个网页有 header、content、footer 这三部分。就拿 content 部分来举例，如果设置 content
的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。</p>
<p>从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。</p>
<p>下面这个例子，有两个块级元素 div，div 没有任何属性，每个 div 里有 li，效果如下：</p>
<p><img src="http://img.smyhvae.com/20170801_2122.png" alt="" /></p>
<p>上面这个例子很简单。可如果我们给里面的<code>&lt;li&gt;</code>标签加浮动。效果却成了下面这个样子：</p>
<p>代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      * {
      }
      li {
        float: left;
        width: 100px;
        height: 20px;
        background-color: pink;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;box1&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;生命壹号1&lt;/li&gt;
        &lt;li&gt;生命壹号2&lt;/li&gt;
        &lt;li&gt;生命壹号3&lt;/li&gt;
        &lt;li&gt;生命壹号4&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class=&quot;box2&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;许嵩1&lt;/li&gt;
        &lt;li&gt;许嵩2&lt;/li&gt;
        &lt;li&gt;许嵩3&lt;/li&gt;
        &lt;li&gt;许嵩4&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20170801_2137.png" alt="" /></p>
<p>上图中，我们发现：第二组中的第 1 个 li，去贴靠第一组中的最后一个 li 了（我们本以为这些 li 会分成两排）。</p>
<p>这便引出我们要讲的：清除浮动的第一种方式。 那该怎么解决呢？</p>
<h3 id="方法-1给浮动元素的祖先元素加高度"><a class="header" href="#方法-1给浮动元素的祖先元素加高度">方法 1：给浮动元素的祖先元素加高度</a></h3>
<p>造成前言中这个现象的根本原因是：li 的<strong>父亲 div 没有设置高度</strong>，导致这两个 div 的高度均为 0px（我们可以通过网页的审查元素进行查看）。div
的高度为零，导致不能给自己浮动的孩子，撑起一个容器。</p>
<p>撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。</p>
<p>好，现在就算给这个 div 设置高度，可如果 div 自己的高度小于孩子的高度，也会出现不正常的现象：</p>
<p><img src="http://img.smyhvae.com/20170801_2152.png" alt="" /></p>
<p>给 div 设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：</p>
<p><img src="http://img.smyhvae.com/20170801_2153.png" alt="" /></p>
<p><strong>总结：</strong></p>
<p><strong>如果一个元素要浮动，那么它的祖先元素一定要有高度。</strong></p>
<p><strong>有高度的盒子，才能关住浮动</strong>。（记住这句过来人的经验之语）</p>
<p>只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。</p>
<p><img src="http://img.smyhvae.com/20170801_2200.png" alt="" /></p>
<p><img src="http://img.smyhvae.com/20170801_2201.png" alt="" /></p>
<h3 id="方法-2clearboth"><a class="header" href="#方法-2clearboth">方法 2：clear:both;</a></h3>
<p>网页制作中，高度 height 其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法 1，工作中用得很少。</p>
<p>那么，能不能不写 height，也把浮动清除了呢？也让浮动之间，互不影响呢？</p>
<p>这个时候，我们可以使用<code>clear:both;</code>这个属性。如下：</p>
<p><img src="http://img.smyhvae.com/20170801_2233.png" alt="" /></p>
<pre><code>clear:both;
</code></pre>
<p>clear 就是清除，both 指的是左浮动、右浮动都要清除。<code>clear:both</code>的意思就是：<strong>不允许左侧和右侧有浮动对象。</strong></p>
<p>这种方法有一个非常大的、致命的问题，<strong>它所在的标签，margin 属性失效了</strong>。读者可以试试看。</p>
<p>margin 失效的本质原因是：上图中的 box1 和 box2，高度为零。</p>
<h3 id="方法-3隔墙法"><a class="header" href="#方法-3隔墙法">方法 3：隔墙法</a></h3>
<p>上面这个例子中，为了防止第二个 div 贴靠到第二个 div，我们可以在这两个 div 中间用一个新的 div 隔开，然后给这个新的 div
设置<code>clear: both;</code>属性；同时，既然这个新的 div 无法设置 margin 属性，我们可以给它设置 height，以达到 margin
的效果（曲线救国）。这便是隔墙法。</p>
<p>我们看看例子效果就知道了：</p>
<p><img src="http://img.smyhvae.com/20170802_1109.png" alt="" /></p>
<p>上图这个例子就是隔墙法。</p>
<p><strong>内墙法：</strong></p>
<p>近些年，有演化出了“内墙法”：</p>
<p><img src="http://img.smyhvae.com/20170802_1123.png" alt="" /></p>
<p>上面这个图非常重要，当作内墙法的公式，先记下来。</p>
<p>为了讲内墙法，我们先记住一句重要的话：<strong>一个父亲是不能被浮动的儿子撑出高度的</strong>。举例如下：</p>
<p>（1）我们在一个 div 里放一个有宽高的 p，效果如下：（很简单）</p>
<p><img src="http://img.smyhvae.com/20170802_1716.png" alt="" /></p>
<p>（2）可如果在此基础之上，给 p 设置浮动，却发现父亲 div 没有高度了：</p>
<p><img src="http://img.smyhvae.com/20170802_1730.png" alt="" /></p>
<p>（3）此时，我么可以在 div 的里面放一个 div（作为内墙），就可以让父亲 div 恢复高度：</p>
<p><img src="http://img.smyhvae.com/20170802_1812.png" alt="" /></p>
<p>于是，我们采用内墙法解决前言中的问题：</p>
<p><img src="http://img.smyhvae.com/20170802_1834.png" alt="" /></p>
<p>与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让 box1 有高）。即：box1 的高度可以自适应内容。</p>
<p>而外墙法，虽然一道墙可以把两个 div 隔开，但是这两个 div 没有高，也就是说，无法 wrap_content。</p>
<h3 id="清除浮动方法-4overflowhidden"><a class="header" href="#清除浮动方法-4overflowhidden">清除浮动方法 4：overflow:hidden;</a></h3>
<p>我们可以使用如下属性：</p>
<pre><code>overflow:hidden;
</code></pre>
<p>overflow 即“溢出”， hidden 即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下：</p>
<p><img src="http://img.smyhvae.com/20170804_1449.png" alt="" /></p>
<p>上图显示，<code>overflow:hidden;</code>的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：</p>
<p>一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上<code>overflow:hidden</code>; 那么，父亲就能被儿子撑出高了。这是一个偏方。</p>
<p>举个例子：</p>
<p><img src="http://img.smyhvae.com/20170804_1920.png" alt="" /></p>
<p>那么对于前言中的例子，我们同样可以使用这一属性：</p>
<p><img src="http://img.smyhvae.com/20170804_1934.png" alt="" /></p>
<h2 id="浮动清除的总结"><a class="header" href="#浮动清除的总结">浮动清除的总结</a></h2>
<blockquote>
<p>我们在上一段讲了四种清除浮动的方法，本段来进行一个总结。</p>
</blockquote>
<p>浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。</p>
<h3 id="1加高法"><a class="header" href="#1加高法">1、加高法</a></h3>
<p>工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。</p>
<pre><code class="language-html">&lt;div&gt;
  //设置height
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div&gt;
  //设置height
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<h3 id="2clearboth法"><a class="header" href="#2clearboth法">2、<code>clear:both;</code>法</a></h3>
<p>最简单的清除浮动的方法，就是给盒子增加 clear:both；表示自己的内部元素，不受其他盒子的影响。</p>
<pre><code class="language-html">&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div&gt;
  //clear:both;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>浮动确实被清除了，不会互相影响了。但是有一个问题，就是 margin 失效。两个 div 之间，没有任何的间隙了。</p>
<h3 id="3隔墙法"><a class="header" href="#3隔墙法">3、隔墙法</a></h3>
<p>在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。 墙用自己的身体当做了间隙。</p>
<pre><code class="language-html">&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;cl h10&quot;&gt;&lt;/div&gt;

&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>我们发现，隔墙法好用，但是第一个 div，还是没有高度。如果我们现在想让第一个 div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。</p>
<p>内墙法：</p>
<pre><code class="language-html">&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;div class=&quot;cl h10&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>内墙法的优点就是，不仅仅能够让后部分的 p 不去追前部分的 p 了，并且能把第一个 div 撑出高度。这样，这个 div 的背景、边框就能够根据 p
的高度来撑开了。</p>
<h3 id="4overflowhidden"><a class="header" href="#4overflowhidden">4、<code>overflow:hidden;</code></a></h3>
<p>这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了
overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。 并且,overflow:hidden;能够让
margin 生效。</p>
<p><strong>清除浮动的例子：</strong></p>
<p>我们现在举个例子，要求实现下图中无序列表部分的效果：</p>
<p><img src="http://img.smyhvae.com/20170804_2321.png" alt="" /></p>
<p>对比一下我们讲的四种清除浮动的方法。如果用外墙法，ul 中不能插入 div 标签，因为 ul 中只能插入 li，如果插入 li
的墙，会浪费语义。如果用内墙法，不美观。综合对比，还是用第四种方法来实现吧，这会让标签显得极其干净整洁：</p>
<p><img src="http://img.smyhvae.com/20170805_1615.png" alt="" /></p>
<p>上方代码中，如果没有加<code>overflow:hidden;</code>，那么第二行的 li 会紧跟着第一行 li 的后面。</p>
<h2 id="浏览器的兼容性问题-1"><a class="header" href="#浏览器的兼容性问题-1">浏览器的兼容性问题</a></h2>
<blockquote>
<p>讲一下上述知识点涉及到的浏览器兼容问题。</p>
</blockquote>
<h3 id="兼容性-1微型盒子"><a class="header" href="#兼容性-1微型盒子">兼容性 1（微型盒子）</a></h3>
<p><strong>兼容性的第一条</strong>：IE6 不支持小于 12px 的盒子，任何小于 12px 的盒子，在 IE6 中看都大。即：IE 6 不支持微型盒子。</p>
<p>举个例子。我们设置一个 height 为 5px 、宽度为 200px 的盒子，看下在 IE 8 和 IE 6 中的显示效果：</p>
<p><img src="http://img.smyhvae.com/20170805_1726.png" alt="" /></p>
<p>解决办法很简单，就是将盒子的字号大小，设置为<strong>小于盒子的高</strong>，比如，如果盒子的高为 5px，那就把 font-size 设置为 0px(0px &lt;
5px)。如下：</p>
<pre><code>height: 5px;
_font-size: 0px;
</code></pre>
<p>我们现在介绍一下浏览器 hack。hack 就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。</p>
<p>IE6 留了一个<strong>后门</strong>：只要给 css 属性之前，加上<strong>下划线</strong>，这个属性就是 IE6 的专有属性。</p>
<p>比如说，我们给背景颜色这个属性加上下划线，就变成了<code>_background-color: green;</code>。效果如下：</p>
<p><img src="http://img.smyhvae.com/20170805_2026.png" alt="" /></p>
<p>于是乎，为了解决微型盒子（即 height 小于 12px）的问题，正确写法：（注意不要忘记下划线）</p>
<pre><code>height: 10px;
_font-size:0;
</code></pre>
<h3 id="兼容性-2"><a class="header" href="#兼容性-2">兼容性 2</a></h3>
<p>**兼容性的第二条：**IE6 不支持用<code>overflow:hidden;</code>来清除浮动。</p>
<p>解决办法，以毒攻毒。追加一条：</p>
<pre><code>_zoom:1;
</code></pre>
<p>完整写法：</p>
<pre><code>overflow: hidden;
_zoom:1;
</code></pre>
<p>实际上，<code>_zoom:1;</code>能够触发浏览器 hasLayout 机制。这个机制，不要深究了，因为只有 IE6 有。我们只需要让 IE6
好用，具体的实现机制，可以自行查阅。</p>
<p>需要强调的是，<code>overflow:hidden;</code>的本意，就是让溢出盒子的 border 的内容隐藏，这个功能是 IE6
兼容的。不兼容的是<code>overflow:hidden;</code>清除浮动的时候。</p>
<p><strong>总结：</strong></p>
<p>我们刚才学习的两个 IE6 的兼容问题，都是通过多写一条 hack 来解决的，这个我们称为伴生属性，即两个属性，要写一起写。</p>
<p>属性 1：</p>
<pre><code>height:6px;
_font-size:0;
</code></pre>
<p>属性 2：</p>
<pre><code>overflow:hidden;
_zoom:1;
</code></pre>
<h2 id="margin-相关"><a class="header" href="#margin-相关">margin 相关</a></h2>
<blockquote>
<p>我们来讲一下浮动中和 margin 相关的知识。</p>
</blockquote>
<h3 id="margin-塌陷margin-重叠"><a class="header" href="#margin-塌陷margin-重叠">margin 塌陷/margin 重叠</a></h3>
<p><strong>标准文档流中，竖直方向的 margin 不叠加，取</strong>较大的值**作为 margin(水平方向的 margin
是可以叠加的，即水平方向没有塌陷现象)。如下图所示：</p>
<p><img src="http://img.smyhvae.com/20170805_0904.png" alt="" /></p>
<p>如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。</p>
<h3 id="盒子居中margin0-auto"><a class="header" href="#盒子居中margin0-auto">盒子居中<code>margin:0 auto;</code></a></h3>
<p>margin 的值可以为 auto，表示自动。当 left、right 两个方向都是 auto 的时候，盒子居中了：</p>
<pre><code>margin-left: auto;
margin-right: auto;
</code></pre>
<p>盒子居中的简写为：</p>
<pre><code>margin:0 auto;
</code></pre>
<p>对上方代码的理解：上下的 margin 为 0，左右的 margin 都尽可能的大，于是就居中了。</p>
<p>注意：</p>
<ul>
<li>（1）只有标准流的盒子，才能使用<code>margin:0 auto;</code>居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用 margin:0
auto;</li>
<li>（2）使用<code>margin:0 auto;</code>的盒子，必须有 width，有明确的 width。（可以这样理解，如果没有明确的 witdh，那么它的 witdh
就是霸占整行，没有意义）</li>
<li>（3）<code>margin:0 auto;</code>是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用<code>text-align:center;</code></li>
</ul>
<p>对上面的第三条总结一下：（非常重要）</p>
<pre><code>margin:0 auto;    //让这个div自己在大容器中的水平方向上居中。
text-align: center;  //让这个div内部的文本居中。
</code></pre>
<p>顺便普及一下知识，text-align 还有：</p>
<pre><code>text-align:left;     //没啥用，因为默认居左
text-align:right;    //文本居右
</code></pre>
<h3 id="善于使用父亲的-padding而不是儿子的-margin"><a class="header" href="#善于使用父亲的-padding而不是儿子的-margin">善于使用父亲的 padding，而不是儿子的 margin</a></h3>
<p>我们来看一个奇怪的现象。现在有下面这样一个结构：（div 中放一个 p）</p>
<pre><code>&lt;div&gt;
	&lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>上面的结构中，我们尝试通过给儿子<code>p</code>一个<code>margin-top:50px;</code>的属性，让其与父亲保持 50px 的上边距。结果却看到了下面的奇怪的现象：</p>
<p><img src="http://img.smyhvae.com/20170806_1537.png" alt="" /></p>
<p>此时我们给父亲 div 加一个 border 属性，就正常了：</p>
<p><img src="http://img.smyhvae.com/20170806_1544.png" alt="" /></p>
<p>如果父亲没有 border，那么儿子的 margin 实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。</p>
<p><strong>margin 这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个 marign 表达父子之间的距离。</strong></p>
<p>所以，如果要表达父子之间的距离，我们一定要善于使用父亲的 padding，而不是儿子的 margin。</p>
<h2 id="关于-margin-的-ie6-兼容问题"><a class="header" href="#关于-margin-的-ie6-兼容问题">关于 margin 的 IE6 兼容问题</a></h2>
<h3 id="ie6-的双倍-margin-的-bug"><a class="header" href="#ie6-的双倍-margin-的-bug">IE6 的双倍 margin 的 bug：</a></h3>
<p>当出现连续浮动的元素，携带与浮动方向相同的 margin 时，队首的元素，会双倍 marign。</p>
<pre><code>&lt;ul&gt;
	&lt;li&gt;&lt;/li&gt;
	&lt;li&gt;&lt;/li&gt;
	&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p><img src="http://img.smyhvae.com/20170806_1558.png" alt="" /></p>
<p>解决方案：</p>
<p>（1）使浮动的方向和 margin 的方向，相反。</p>
<p>所以，你就会发现，我们特别喜欢，浮动的方向和 margin 的方向相反。并且，前端开发工程师，把这个当做习惯了。</p>
<pre><code>float: left;
margin-right: 40px;
</code></pre>
<p>（2）使用 hack：（没必要，别惯着这个 IE6）</p>
<p>单独给队首的元素，写一个一半的 margin：</p>
<pre><code>&lt;li class=&quot;no1&quot;&gt;&lt;/li&gt;
</code></pre>
<pre><code>ul li.no1{
	_margin-left:20px;
}
</code></pre>
<p>PS：双倍 margin 的问题，面试经常问哦。</p>
<h3 id="ie6-的-3px-bug"><a class="header" href="#ie6-的-3px-bug">IE6 的 3px bug</a></h3>
<p><img src="http://img.smyhvae.com/20170806_1616.png" alt="" /></p>
<p>解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用 padding，而不是 margin）。所以，如果你出现了 3px
bug，说明你的代码不标准。</p>
<p>IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲 IE6 的兼容性问题，就是为了增加面试的成功率，不是为了成为 IE6 的专家。</p>
<h2 id="fireworks-和-others"><a class="header" href="#fireworks-和-others">Fireworks 和 others</a></h2>
<h3 id="fireworks"><a class="header" href="#fireworks">Fireworks</a></h3>
<p>fireworks 是 Adobe 公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks 的默认文件格式是 png。</p>
<p>标尺的快捷键：Ctrl + Alt+ R</p>
<h3 id="others"><a class="header" href="#others">others</a></h3>
<p>首行缩进两个汉字：</p>
<pre><code>text-indent: 2em;
</code></pre>
<p>上方属性中，单位比较奇怪，叫做 em，em 就是汉字的一个宽度。indent 的意思是缩进。</p>
<blockquote>
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/8296748.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新<strong>前端的系列文章</strong>。欢迎在
GitHub 上关注我，一起入门和进阶前端。</p>
</blockquote>
<blockquote>
<p>以下是正文。</p>
</blockquote>
<p>CSS 的定位属性有三种，分别是绝对定位、相对定位、固定定位。</p>
<pre><code>	position: absolute;  &lt;!-- 绝对定位 --&gt;

	position: relative;  &lt;!-- 相对定位 --&gt;

	position: fixed;     &lt;!-- 固定定位 --&gt;
</code></pre>
<p>下面逐一介绍。</p>
<h2 id="相对定位"><a class="header" href="#相对定位">相对定位</a></h2>
<p><strong>相对定位</strong>：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。</p>
<p>我们之前学习的背景属性中，是通过如下格式：</p>
<pre><code>background-position:向右偏移量 向下偏移量;
</code></pre>
<p>但这回的定位属性，是通过如下格式：</p>
<pre><code>position: relative;
left: 50px;
top: 50px;
</code></pre>
<p>相对定位的举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;Generator&quot; content=&quot;EditPlus®&quot; /&gt;
    &lt;meta name=&quot;Author&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Keywords&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;Description&quot; content=&quot;&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;

    &lt;style type=&quot;text/css&quot;&gt;
      body {
        margin: 0px;
      }

      .div1 {
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }

      .div2 {
        position: relative; /*相对定位：相对于自己原来的位置*/
        left: 50px; /*横坐标：正值表示向右偏移，负值表示向左偏移*/
        top: 50px; /*纵坐标：正值表示向下偏移，负值表示向上偏移*/

        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
    &lt;/style&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div class=&quot;div1&quot;&gt;有生之年&lt;/div&gt;
    &lt;div class=&quot;div2&quot;&gt;狭路相逢&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-28.png" alt="" /></p>
<h3 id="相对定位不脱标"><a class="header" href="#相对定位不脱标">相对定位不脱标</a></h3>
<p><strong>相对定位</strong>：不脱标，老家留坑，<strong>别人不会把它的位置挤走</strong>。</p>
<p>也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。</p>
<h3 id="相对定位的用途"><a class="header" href="#相对定位的用途">相对定位的用途</a></h3>
<p>如果想做“压盖”效果（把一个 div 放到另一个 div 之上），我们一般<strong>不用</strong>相对定位来做。相对定位，就两个作用：</p>
<ul>
<li>（1）微调元素</li>
<li>（2）做绝对定位的参考，子绝父相</li>
</ul>
<h3 id="相对定位的定位值"><a class="header" href="#相对定位的定位值">相对定位的定位值</a></h3>
<ul>
<li>
<p>left：盒子右移</p>
</li>
<li>
<p>right：盒子左移</p>
</li>
<li>
<p>top：盒子下移</p>
</li>
<li>
<p>bottom：盒子上移</p>
</li>
</ul>
<p>PS：负数表示相反的方向。</p>
<p>↘：</p>
<pre><code>position: relative;
left: 40px;
top: 10px;
</code></pre>
<p>↙：</p>
<pre><code>position: relative;
right: 100px;
top: 100px;
</code></pre>
<p>↖：</p>
<pre><code>position: relative;
right: 100px;
bottom: 100px;
</code></pre>
<p>↗：</p>
<pre><code>position: relative;
left: 200px;
bottom: 200px;
</code></pre>
<p><img src="http://img.smyhvae.com/20180115_1716.png" alt="" /></p>
<p>如果要描述上面这张图的方向，我们可以首先可以这样描述：</p>
<pre><code>position: relative;
left: 200px;
top: 100px;
</code></pre>
<p>因为<code>left: 200px</code>等价于<code>right: -200px</code>，所以这张图其实有四种写法。</p>
<h2 id="绝对定位"><a class="header" href="#绝对定位">绝对定位</a></h2>
<p><strong>绝对定位</strong>：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用 left 表示，纵坐标用 top 或者 bottom 表示。</p>
<p>格式举例如下：</p>
<pre><code>position: absolute;  /*绝对定位*/
left: 10px;  /*横坐标*/
top/bottom: 20px;  /*纵坐标*/
</code></pre>
<h3 id="绝对定位脱标"><a class="header" href="#绝对定位脱标">绝对定位脱标</a></h3>
<p><strong>绝对定位的盒子脱离了标准文档流。</strong></p>
<p>所以，所有的标准文档流的性质，绝对定位之后都不遵守了。</p>
<p>绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要<code>display:block</code>就可以设置宽、高了。</p>
<h3 id="绝对定位的参考点重要"><a class="header" href="#绝对定位的参考点重要">绝对定位的参考点（重要）</a></h3>
<p>（1）如果用<strong>top 描述</strong>，那么参考点就是<strong>页面的左上角</strong>，而不是浏览器的左上角：</p>
<p><img src="http://img.smyhvae.com/20180115_2120.png" alt="" /></p>
<p>（2）如果用<strong>bottom 描述</strong>，那么参考点就是<strong>浏览器首屏窗口尺寸</strong>（好好理解“首屏”二字），对应的页面的左下角：</p>
<p><img src="http://img.smyhvae.com/20180115_2121.png" alt="" /></p>
<p>为了理解“<strong>首屏</strong>”二字的含义，我们来看一下动态图：</p>
<p><img src="http://img.smyhvae.com/20180115_2200.gif" alt="" /></p>
<p>问题：</p>
<p><img src="http://img.smyhvae.com/20180115_2131.png" alt="" /></p>
<p>答案：</p>
<p>用 bottom 的定位的时候，参考的是浏览器首屏大小对应的页面左下角。</p>
<p><img src="http://img.smyhvae.com/20180115_2132.png" alt="" /></p>
<h3 id="以盒子为参考点"><a class="header" href="#以盒子为参考点">以盒子为参考点</a></h3>
<p>一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。</p>
<p>如下：（子绝父相）</p>
<p><img src="http://img.smyhvae.com/20180115_2210.png" alt="" /></p>
<p>以下几点需要注意。</p>
<p>（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：</p>
<pre><code>&lt;div class=&quot;box1&quot;&gt;        相对定位
	&lt;div class=&quot;box2&quot;&gt;    没有定位
		&lt;p&gt;&lt;/p&gt;           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>再比如：</p>
<pre><code>&lt;div class=&quot;box1&quot;&gt;        相对定位
	&lt;div class=&quot;box2&quot;&gt;    相对定位
		&lt;p&gt;&lt;/p&gt;           绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：</p>
<p>子绝父绝、<strong>子绝父相</strong>、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。</p>
<p><strong>工程应用：</strong></p>
<p>“<strong>子绝父相</strong>”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：</p>
<blockquote>
<p>父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。</p>
</blockquote>
<p>（3）绝对定位的儿子，无视参考的那个盒子的 padding：</p>
<p>下图中，绿色部分是父亲 div 的 padding，蓝色部分 p 是 div 的内容区域。此时，如果 div 相对定位，p 绝对定位，那么， p 将无视父亲的
padding，在 border 内侧为参考点，进行定位：</p>
<p><img src="http://img.smyhvae.com/20180116_0812.png" alt="" /></p>
<p><strong>工程应用：</strong></p>
<p>绝对定位非常适合用来做“压盖”效果。我们来举个 lagou.com 上的例子。</p>
<p>现在有如下两张图片素材：</p>
<p><img src="http://img.smyhvae.com/20180116_1115.png" alt="" /></p>
<p><img src="http://img.smyhvae.com/20180116_1116.jpg" alt="" /></p>
<p>要求作出如下效果：</p>
<p><img src="http://img.smyhvae.com/20180116_1117.png" alt="" /></p>
<p>代码实现如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      .box {
        margin: 100px;
        width: 308px;
        height: 307px;
        border: 1px solid #ff7e00;
        position: relative; /*子绝父相*/
      }
      .box .image img {
        width: 308px;
        height: 196px;
      }
      .box .dtc {
        display: block; /*转为块级元素，才能设置span的宽高*/
        width: 52px;
        height: 28px;
        background-image: url(http://img.smyhvae.com/20180116_1115.png);
        background-position: -108px 0px; /*这里用到了精灵图*/
        position: absolute; /*采用绝对定位的方式，将精灵图盖在最上层*/
        top: -9px;
        left: 13px;
      }
      .box h4 {
        background-color: black;
        color: white;
        width: 308px;
        height: 40px;
        line-height: 40px;
        position: absolute;
        top: 156px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;box&quot;&gt;
      &lt;span class=&quot;dtc&quot;&gt;&lt;/span&gt;
      &lt;div class=&quot;image&quot;&gt;
        &lt;img src=&quot;http://img.smyhvae.com/20180116_1116.jpg&quot; alt=&quot;&quot; /&gt;
      &lt;/div&gt;
      &lt;h4&gt;广东深圳宝安区建安一路海雅缤纷城4楼&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>代码解释如下：</p>
<ul>
<li>
<p>为了显示“多套餐”那个小图，我们需要用到精灵图。</p>
</li>
<li>
<p>“多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报 image 的上方的。</p>
</li>
</ul>
<p>代码的效果如下：</p>
<p><img src="http://img.smyhvae.com/20180116_1335.png" alt="" /></p>
<h3 id="让绝对定位中的盒子在父亲里居中"><a class="header" href="#让绝对定位中的盒子在父亲里居中">让绝对定位中的盒子在父亲里居中</a></h3>
<p>我们知道，如果想让一个<strong>标准流中的盒子在父亲里居中</strong>（水平方向看），可以将其设置<code>margin: 0 auto</code>属性。</p>
<p>可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：</p>
<pre><code>div {
	width: 600px;
	height: 60px;
	position: absolute;  绝对定位的盒子
	left: 50%;           首先，让左边线居中
	top: 0;
	margin-left: -300px;  然后，向左移动宽度（600px）的一半
}
</code></pre>
<p>如上方代码所示，我们先让这个宽度为 600px 的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。</p>
<p><img src="http://img.smyhvae.com/20180116_1356.png" alt="" /></p>
<p>我们可以总结成一个公式：</p>
<blockquote>
<p>left:50%; margin-left:负的宽度的一半</p>
</blockquote>
<h2 id="固定定位"><a class="header" href="#固定定位">固定定位</a></h2>
<p><strong>固定定位</strong>：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。</p>
<p>备注：IE6 不兼容。</p>
<p><strong>用途 1</strong>：网页右下角的“返回到顶部”</p>
<p>比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。</p>
<pre><code class="language-html">&lt;style type=&quot;text/css&quot;&gt;
  .backtop {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: gray;
    text-align: center;
    line-height: 30px;
    color: white;
    text-decoration: none; /*去掉超链接的下划线*/
  }
&lt;/style&gt;
</code></pre>
<p>**用途 2：**顶部导航条</p>
<p>我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。</p>
<p>需要注意的是，假设顶部导航条的高度是 60px，那么，为了防止其他的内容被导航条覆盖，我们要给 body 标签设置 60px 的 padding-top。</p>
<p>顶部导航条的实现如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      * {
        margin: 0;
        padding: 0;
      }
      body {
        /*为什么要写这个？*/
        /*不希望我们的页面被nav挡住*/
        padding-top: 60px;
        /*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
        _padding-top: 0;
      }
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #333;
        z-index: 99999999;
      }
      .inner_c {
        width: 1000px;
        height: 60px;
        margin: 0 auto;
      }
      .inner_c ul {
        list-style: none;
      }
      .inner_c ul li {
        float: left;
        width: 100px;
        height: 60px;
        text-align: center;
        line-height: 60px;
      }
      .inner_c ul li a {
        display: block;
        width: 100px;
        height: 60px;
        color: white;
        text-decoration: none;
      }
      .inner_c ul li a:hover {
        background-color: gold;
      }
      p {
        font-size: 30px;
      }
      .btn {
        display: block;
        width: 120px;
        height: 30px;
        background-color: orange;
        position: relative;
        top: 2px;
        left: 1px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;nav&quot;&gt;
      &lt;div class=&quot;inner_c&quot;&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;网页栏目&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="5z-index-属性"><a class="header" href="#5z-index-属性">5、z-index 属性：</a></h3>
<p><strong>z-index</strong>属性：表示谁压着谁。数值大的压盖住数值小的。</p>
<p>有如下特性：</p>
<p>（1）属性值大的位于上层，属性值小的位于下层。</p>
<p>（2）z-index 值没有单位，就是一个正整数。默认的 z-index 值是 0。</p>
<p>（3）如果大家都没有 z-index 值，或者 z-index 值一样，那么在 HTML
代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。</p>
<p>（4）只有定位了的元素，才能有 z-index 值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用 z-index 值。<strong>而浮动的元素不能用</strong>。</p>
<p>（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲 1 比父亲 2 大，那么，即使儿子 1 比儿子 2 小，儿子 1 也能在最上层。</p>
<p>针对（1）（2）（3）条，举例如下：</p>
<p>这是默认情况下的例子：（div2 在上层，div1 在下层）</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-32.png" alt="" /></p>
<p>现在加一个<code>z-index</code>属性，要求效果如下：</p>
<p><img src="http://img.smyhvae.com/2015-10-03-css-33.png" alt="" /></p>
<p>第五条分析：</p>
<p><img src="http://img.smyhvae.com/20180116_1445.png" alt="" /></p>
<p>z-index 属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个 z-index 属性决定，谁处于最上方。也就是<strong>层级</strong>的应用。</p>
<p><strong>层级：</strong></p>
<p>（1）必须有定位（除去 static）</p>
<p>（2）用<code>z-index</code>来控制层级数。</p>
<h2 id="前言-3"><a class="header" href="#前言-3">前言</a></h2>
<blockquote>
<p>CSS 已经学了一些基础内容了，我们来讲解一个小案例吧。以<a href="http://www.boyaa.com/">博雅互动</a>的官网首页举例。</p>
</blockquote>
<h3 id="版心"><a class="header" href="#版心">版心</a></h3>
<p>首页的<strong>版心</strong>如下：</p>
<p><img src="http://img.smyhvae.com/20170813_1535.png" alt="" /></p>
<p>这里我们要普及一个概念，叫“<a href="https://baike.baidu.com/item/%E7%89%88%E5%BF%83">版心</a>”。<strong>版心是页面中主要内容所在的区域。</strong></p>
<p>比如说，网站左上角的 logo，设计图给出的左边距是 143 像素，此时，我们千万不要以为，logo 的左边距真的是 143
像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。</p>
<p>我们量一下中间四个方形图的 width，是 1000px，所以，网页版心的宽度是 1000px。</p>
<h3 id="网页的结构"><a class="header" href="#网页的结构">网页的结构</a></h3>
<p>从结构上来看，网页分为头部（导航栏）、banner 区、内容区、底部。</p>
<h2 id="导航栏的制作"><a class="header" href="#导航栏的制作">导航栏的制作</a></h2>
<p>在此我们只讲基础知识的使用，不涉及浏览器的优化。</p>
<p><code>class==header</code>这个 div 是顶部的通栏，我们在里面放一个 1000px 宽的
div，作为通栏的版心，我一般把这个版心称为<code>class=inner_c</code>，c 指的是 center。</p>
<p><code>class=inner_c</code>不需要给高，因为它可以被内容撑高。</p>
<p>现在我们需要在<code>class=inner_c</code>里放三个东西：左侧的 logo、中间的导航栏、右侧的“加入我们”。</p>
<p>接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用 CSS3 实现（IE 7、IE 8
不兼容）。我们暂时使用切图来实现。</p>
<p>我们最好把「加入我们」这个超链接<code>&lt;a&gt;</code>放到<code>div</code>里，然后设置 div 的 margin 和 padding，而不是直接设置<code>&lt;a&gt;</code>的边距。</p>
<p>我们起个名字叫<code>class=jrwm</code>是没有问题的，这在工作当中很常见，如果写成<code>class=join_us</code>反倒很别扭。</p>
<p>暂时我们的做法是：</p>
<ul>
<li>（1）给<code>class=jrwm_box</code>这个 div 里放一个<code>class=jrwm</code>的 div。<code>class=jrwm</code>用来放绿色的背景图片。</li>
<li>（2）在<code>class=jrwm</code>里放一个超链接，并将超链接转为块级元素。</li>
</ul>
<p>最终，导航栏的代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      * {
        margin: 0px;
        padding: 0px;
      }
      body {
        font-size: 14px;
        font-family: &quot;Microsoft YaHei&quot;, &quot;SimSun&quot;;
        height: 8888px;
      }
      .header {
        height: 58px;
        background-color: #191d3a;
      }
      /*版心*/
      .inner_c {
        width: 1000px;
        margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
      }
      /*导航条的logo*/
      .header .logo {
        float: left;
        margin-right: 40px;
      }
      .header .nav {
        float: left;
      }
      .header .nav ul {
        list-style: none; /*去掉列表前面的圆点*/
      }
      .header .nav ul li {
        float: left;
        width: 100px;
        line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
        border-left: 1px solid #252947; /*每个li之间有间隔线*/
      }
      .header .nav ul li.last {
        border-right: 1px solid #252947; /*最后一个li的右边加间隔线*/
      }
      .header .nav ul li a {
        display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
        height: 58px;
        text-decoration: none; /*去掉超链的下划线*/
        color: #818496;
        text-align: center; /*让这个div内部的文本居中*/
      }
      .header .nav ul li a.current {
        color: white;
        background: #252947;
      }
      .header .nav ul li a:hover {
        color: white;
        background: #252947;
      }

      .header .jrwm_box {
        float: left;
        height: 58px;
        width: 100px;
        padding-left: 48px;
        padding-top: 12px;
      }
      /*放背景图片的div*/
      .header .jrwm_box .jrwm {
        height: 34px;
        background-image: url(images/jrwm.png);
        background-repeat: no-repeat;
        text-align: center; /*让这个div内部的超链接居中*/
      }
      .header .jrwm_box .jrwm a {
        display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
        line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
        text-decoration: none; /*去掉超链的下划线*/
        color: white;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;header&quot;&gt;
      &lt;div class=&quot;inner_c&quot;&gt;
        &lt;div class=&quot;logo&quot;&gt;
          &lt;img src=&quot;images/logo.png &quot; alt=&quot;&quot; /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;nav&quot;&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;current&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;博雅游戏&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;博雅新闻&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;关于我们&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;客服中心&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;last&quot;&gt;&lt;a href=&quot;#&quot;&gt;投资者关系&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;jrwm_box&quot;&gt;
          &lt;div class=&quot;jrwm&quot;&gt;
            &lt;a href=&quot;https://www.google.com/&quot; target=&quot;_blank&quot;&gt;加入我们&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>导航栏的效果如下：</p>
<p><img src="http://img.smyhvae.com/20180114_1332.gif" alt="" /></p>
<h2 id="banenr-图"><a class="header" href="#banenr-图">banenr 图</a></h2>
<blockquote>
<p>因为涉及到 js 的内容，这里先不讲内容区域<strong>轮播图</strong>的效果。</p>
</blockquote>
<p>我们首先在导航条和 banner 图之间加一道墙，即<code>class=cl</code>，然后采用隔墙法对其设置<code>clear: both;</code>的属性。</p>
<p>然后设置 banner 的背景图片属性，添加 banner 图。</p>
<h2 id="内容区域的制作"><a class="header" href="#内容区域的制作">内容区域的制作</a></h2>
<p>导航栏+banner+内容区域的完整代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      * {
        margin: 0px;
        padding: 0px;
      }

      /*清除浮动的影响*/
      .cl {
        clear: both;
      }
      body {
        font-size: 14px;
        font-family: &quot;Microsoft YaHei&quot;, &quot;SimSun&quot;;
        height: 8888px;
      }
      .header {
        height: 58px;
        background-color: #191d3a;
      }
      /*版心*/
      .inner_c {
        width: 1000px;
        margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
      }
      /*导航条的logo*/
      .header .logo {
        float: left;
        margin-right: 40px;
      }
      .header .nav {
        float: left;
      }
      .header .nav ul {
        list-style: none; /*去掉列表前面的圆点*/
      }
      .header .nav ul li {
        float: left;
        width: 100px;
        line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
        border-left: 1px solid #252947; /*每个li之间有间隔线*/
      }
      .header .nav ul li.last {
        border-right: 1px solid #252947; /*最后一个li的右边加间隔线*/
      }
      .header .nav ul li a {
        display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
        height: 58px;
        text-decoration: none; /*去掉超链的下划线*/
        color: #818496;
        text-align: center; /*让这个div内部的文本居中*/
      }
      .header .nav ul li a.current {
        color: white;
        background: #252947;
      }
      .header .nav ul li a:hover {
        color: white;
        background: #252947;
      }

      .header .jrwm_box {
        float: left;
        height: 58px;
        width: 100px;
        padding-left: 48px;
        padding-top: 12px;
      }
      /*放背景图片的div*/
      .header .jrwm_box .jrwm {
        height: 34px;
        background-image: url(images/jrwm.png);
        background-repeat: no-repeat;
        text-align: center; /*让这个div内部的超链接居中*/
      }
      .header .jrwm_box .jrwm a {
        display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
        line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
        text-decoration: none; /*去掉超链的下划线*/
        color: white;
      }

      .banner {
        height: 465px;
        background: url(images/banner.jpg) no-repeat center top;
      }
      .content {
        padding-top: 50px;
      }
      .content .product {
        height: 229px;
        border-bottom: 1px solid #dbe1e7;
      }
      .content .product ul {
        list-style: none;
      }
      .content .product ul li {
        float: left;
        width: 218px;
        margin-right: 43px;
      }
      .content .product ul li.last {
        margin-right: 0;
        width: 217px;
      }
      .content .product ul li img {
        width: 218px;
        height: 130px;
      }
      .content .product ul li.last img {
        width: 217px;
      }

      .content .product ul li h3 {
        text-align: center;
        line-height: 38px;
        font-size: 14px;
        font-weight: bold;
      }
      .content .product ul li p.djbf {
        text-align: center;
        line-height: 16px;
      }
      .content .product ul li p.djbf a {
        font-size: 12px;
        color: #38b774;
        text-decoration: none;
        background: url(images/sanjiaoxing.png) no-repeat right 5px;
        padding-right: 12px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;header&quot;&gt;
      &lt;div class=&quot;inner_c&quot;&gt;
        &lt;div class=&quot;logo&quot;&gt;
          &lt;img src=&quot;images/logo.png &quot; alt=&quot;&quot; /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;nav&quot;&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;current&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;博雅游戏&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;博雅新闻&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;关于我们&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;客服中心&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;last&quot;&gt;&lt;a href=&quot;#&quot;&gt;投资者关系&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;jrwm_box&quot;&gt;
          &lt;div class=&quot;jrwm&quot;&gt;
            &lt;a href=&quot;https://www.google.com/&quot; target=&quot;_blank&quot;&gt;加入我们&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- 在导航条和banner之间隔一堵墙 --&gt;
    &lt;div class=&quot;cl&quot;&gt;&lt;/div&gt;

    &lt;div class=&quot;banner&quot;&gt;&lt;/div&gt;

    &lt;!-- 内容区域 --&gt;
    &lt;div class=&quot;content inner_c&quot;&gt;
      &lt;div class=&quot;product&quot;&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;p&gt;&lt;img src=&quot;images/pro1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
            &lt;h3&gt;BPT宣传片&lt;/h3&gt;
            &lt;p class=&quot;djbf&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;点击播放&lt;/a&gt;
            &lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;p&gt;&lt;img src=&quot;images/pro2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
            &lt;h3&gt;BPT宣传片&lt;/h3&gt;
            &lt;p class=&quot;djbf&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;点击播放&lt;/a&gt;
            &lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;p&gt;&lt;img src=&quot;images/pro3.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
            &lt;h3&gt;BPT宣传片&lt;/h3&gt;
            &lt;p class=&quot;djbf&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;点击播放&lt;/a&gt;
            &lt;/p&gt;
          &lt;/li&gt;
          &lt;li class=&quot;last&quot;&gt;
            &lt;p&gt;&lt;img src=&quot;images/pro4.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
            &lt;h3&gt;BPT宣传片&lt;/h3&gt;
            &lt;p class=&quot;djbf&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;点击播放&lt;/a&gt;
            &lt;/p&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>代码解释：</p>
<p>（1）导航栏，左侧的 logo：</p>
<p><strong>错误的写法：</strong></p>
<p>可能会有人直接将 img 标签作为 logo 的布局：</p>
<pre><code class="language-html">&lt;div class=&quot;logo&quot;&gt;
  &lt;img src=&quot;images/logo.png &quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
</code></pre>
<p>然后将 img 的样式设置为：</p>
<pre><code class="language-css">.header .logo {
  float: left;
  margin-right: 40px;
}
</code></pre>
<p>这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于 SEO。</p>
<p><strong>正确的写法：</strong></p>
<p>正确的写法是将超链接作为 logo 的布局，里面放入文字（文字可以被 SEO）：</p>
<pre><code class="language-html">&lt;h1 class=&quot;logo&quot;&gt;
  &lt;a href=&quot;#&quot;&gt; 博雅互动-世界上最好的游戏公司 &lt;/a&gt;
&lt;/h1&gt;
</code></pre>
<p>然后将<strong>logo 设置为背景图</strong>：</p>
<pre><code class="language-css">.header .logo {
  float: left;
  padding-left: 12px;
  margin-right: 39px;
  width: 174px;
  height: 58px;
}
.header .logo a {
  display: block;
  width: 174px;
  height: 58px;
  background: url(images/logo.png) no-repeat;
  text-indent: -999em;
}
</code></pre>
<p>由于搜索引擎是搜不到图片的，所以一定要把“博雅互动”这几个文字加上去，<strong>然后通过<code>text-indent</code>缩进的属性把文字赶走到视线以外的地方</strong>。这是做搜索引擎优化的一个重要的技巧。</p>
<p>另外，背景要放在里层的 a 标签里，不要放在外层的 h1 标签里。假设背景图放在 h1 里，那么不管 h1 的 padding 有多大，背景图的位置都不会变。</p>
<p>（1）内容区域，“点击播放”右侧的小三角形：</p>
<p>我们在“点击播放”的右侧放了一个三角形。这个很有技巧。</p>
<p><img src="http://img.smyhvae.com/20180115_1356.png" alt="" /></p>
<p>代码截取如下：</p>
<pre><code class="language-css">.content .product ul li p.djbf a {
  font-size: 12px;
  color: #38b774;
  text-decoration: none;
  background: url(images/sanjiaoxing.png) no-repeat right center;
  padding-right: 12px;
}
</code></pre>
<p>上方代码中，我们在第 6 行给“点击播放”这个超链接加一个右 padding（很关键），然后在第 5 行把小三角这个背景图放在右 padding
的位置，就能达到想要的视觉效果。</p>
<p>（2）导航栏+banner+内容区域的效果如下：</p>
<p><img src="http://img.smyhvae.com/20180114_1405.png" alt="" /></p>
<p>工程文件如下：</p>
<ul>
<li><a href="https://download.csdn.net/download/smyhvae/11832612">2018-03-20-boya.rar</a></li>
</ul>
<h2 id="css3-介绍"><a class="header" href="#css3-介绍">CSS3 介绍</a></h2>
<p>CSS3 在 CSS2 基础上，<strong>增强</strong>或<strong>新增</strong>了许多特性， 弥补了 CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷。</p>
<h3 id="css3-的现状"><a class="header" href="#css3-的现状">CSS3 的现状</a></h3>
<ul>
<li>
<p>浏览器支持程度不够好，有些需要添加<strong>私有前缀</strong></p>
</li>
<li>
<p>移动端支持优于 PC 端</p>
</li>
<li>
<p>不断改进中</p>
</li>
<li>
<p>应用相对广泛</p>
</li>
</ul>
<h3 id="应对的策略渐进增强"><a class="header" href="#应对的策略渐进增强">应对的策略：渐进增强</a></h3>
<ul>
<li>（1）坚持<strong>渐进增强</strong>的原则：<strong>让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好</strong>。【重要】</li>
</ul>
<p>比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。</p>
<ul>
<li>
<p>（2）考虑用户群体。</p>
</li>
<li>
<p>（3）遵照产品的方案。</p>
</li>
</ul>
<p>参考链接：</p>
<ul>
<li>
<p><a href="https://www.jianshu.com/p/d313f1108862">渐进增强 VS 优雅降级 | 简书</a></p>
</li>
<li>
<p><a href="https://www.cnblogs.com/iceflorence/archive/2017/03/27/6625466.html">渐进增强和优雅降级之间的不同（面试题目）</a></p>
</li>
</ul>
<h3 id="浏览器的版本问题"><a class="header" href="#浏览器的版本问题">浏览器的版本问题</a></h3>
<p>由于 CSS3 普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为：</p>
<ul>
<li>
<p>Chrome 浏览器 version 46+</p>
</li>
<li>
<p>Firefox 浏览器 firefox 42+</p>
</li>
</ul>
<h3 id="如何使用手册"><a class="header" href="#如何使用手册">如何使用手册</a></h3>
<p>CSS 参考手册的网址：<a href="http://css.doyoe.com/">http://css.doyoe.com/</a></p>
<p>CSS 参考手册的下载链接：<a href="http://download.csdn.net/download/smyhvae/10243974">http://download.csdn.net/download/smyhvae/10243974</a></p>
<p>在查看<a href="http://download.csdn.net/download/smyhvae/10243974">CSS 参考手册</a>时，需要注意以下符号：</p>
<p><img src="http://img.smyhvae.com/20180206_2150.png" alt="" /></p>
<p>比如说，<code>{1,4}</code>表示可以设置一至四个参数。</p>
<p>下面讲 CSS3 的基础知识。本文讲一下 CSS3 选择器的内容。</p>
<h2 id="css3-选择器"><a class="header" href="#css3-选择器">CSS3 选择器</a></h2>
<p>我们之前学过 CSS 的选择器，比如：</p>
<pre><code>     div 标签选择器

     .box 类名选择器

     #box　id选择器

     div p 后代选择器

     div.box 交集选择器

     div,p,span 并集选择器

     div&gt;p 子代选择器

     * : 通配符

     div+p: 选中div后面相邻的第一个p

     div~p: 选中的div后面所有的p
</code></pre>
<p>CSS3 新增了许多<strong>灵活</strong>查找元素的方法，极大的提高了查找元素的效率和<strong>精准度</strong>。CSS3 选择器与 jQuery
中所提供的<strong>绝大部分</strong>选择器兼容。</p>
<h3 id="属性选择器"><a class="header" href="#属性选择器">属性选择器</a></h3>
<p>属性选择器的标志性符号是 <code>[]</code>。</p>
<p>匹配含义：</p>
<pre><code>^：开头  $：结尾  *：包含
</code></pre>
<p>格式：</p>
<ul>
<li>
<p><code>E[title]</code> 选中页面的 E 元素，并且 E 存在 title 属性即可。</p>
</li>
<li>
<p><code>E[title=&quot;abc&quot;]</code>选中页面的 E 元素，并且 E 需要带有 title 属性，且属性值<strong>完全等于</strong>abc。</p>
</li>
<li>
<p><code>E[attr~=val]</code> 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的 E 元素。</p>
</li>
<li>
<p><code>E[attr|=val]</code> 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。</p>
</li>
<li>
<p><code>E[title^=&quot;abc&quot;]</code> 选中页面的 E 元素，并且 E 需要带有 title 属性,属性值以 abc 开头。</p>
</li>
<li>
<p><code>E[title$=&quot;abc&quot;]</code> 选中页面的 E 元素，并且 E 需要带有 title 属性,属性值以 abc 结尾。</p>
</li>
<li>
<p><code>E[title*=&quot;abc&quot;]</code> 选中页面的 E 元素，并且 E 需要带有 title 属性,属性值任意位置包含 abc。</p>
</li>
</ul>
<p>比如说，我们用属性选择器去匹配标签的 className，是非常方便的。</p>
<p>这里我们用 class 属性来举例。代码举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;选择器 - 属性&lt;/title&gt;
    &lt;style&gt;
      body {
        margin: 0;
        padding: 0;
        font-family: &quot;微软雅黑&quot;;
        background-color: #f7f7f7;
      }

      .wrapper {
        width: 1024px;
        margin: 0 auto;
      }

      .wrapper &gt; section {
        min-height: 300px;
        margin-bottom: 30px;
        box-shadow: 1px 1px 4px #ddd;
        background-color: #fff;
      }

      .wrapper &gt; header {
        text-align: center;
        line-height: 1;
        padding: 20px;
        margin-bottom: 10px;
        font-size: 30px;
      }

      .wrapper section &gt; header {
        line-height: 1;
        padding: 10px;
        font-size: 22px;
        color: #333;
        background-color: #eee;
      }

      .wrapper .wrap-box {
        padding: 20px;
      }

      form {
        width: 300px;
        height: 300px;
        margin: 0 auto;
      }

      form input[type=&quot;text&quot;] {
        width: 200px;
        height: 30px;
      }

      form input[type=&quot;password&quot;] {
        width: 200px;
        height: 30px;
      }

      .attr1 {
      }

      .download {
      }

      .attr1 a[href=&quot;./a.rmvb&quot;] {
        color: red;
      }

      .attr1 a[href=&quot;./b.rmvb&quot;] {
        color: pink;
      }

      /*  E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/
      .attr2 a[class~=&quot;download&quot;] {
        color: red;
      }

      /*  E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以&quot;-&quot;分隔的*/
      .attr3 a[class|=&quot;download&quot;] {
        color: red;
      }

      /*  E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
      .attr4 a[class*=&quot;download&quot;] {
        color: red;
      }

      /*  E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
      .attr5 a[class^=&quot;download&quot;] {
        color: red;
      }

      /*  E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
      .attr6 a[class$=&quot;download&quot;] {
        color: red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;header&gt;CSS3-属性选择器&lt;/header&gt;
      &lt;section&gt;
        &lt;header&gt;简介&lt;/header&gt;
        &lt;div class=&quot;wrap-box&quot;&gt;
          &lt;form action=&quot;&quot;&gt;
            &lt;ul&gt;
              &lt;li&gt;姓名: &lt;input type=&quot;text&quot; /&gt;&lt;/li&gt;
              &lt;li&gt;密码: &lt;input type=&quot;password&quot; /&gt;&lt;/li&gt;

              &lt;li&gt;性别: &lt;input type=&quot;radio&quot; /&gt;男 &lt;input type=&quot;radio&quot; /&gt; 女&lt;/li&gt;
              &lt;li&gt;兴趣: &lt;input type=&quot;checkbox&quot; name=&quot;&quot; id=&quot;&quot; /&gt;写代码&lt;/li&gt;
              &lt;li&gt;
                &lt;input type=&quot;submit&quot; value=&quot;提交&quot; /&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;attr1&quot;&gt;
        &lt;header&gt;E[attr]&lt;/header&gt;
        &lt;div class=&quot;wrap-box&quot;&gt;
          &lt;a href=&quot;./a.rmvb&quot; class=&quot;download download-movie&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./b.rmvb&quot; class=&quot;download download-movie&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./a.mp3&quot; class=&quot;download download-music&quot;&gt;下载&lt;/a&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;attr2&quot;&gt;
        &lt;header&gt;E[attr~=attr]&lt;/header&gt;
        &lt;div class=&quot;wrap-box&quot;&gt;
          &lt;a href=&quot;./a.rmvb&quot; class=&quot;download download-movie&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./b.rmvb&quot; class=&quot;download download-movie&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./a.mp3&quot; class=&quot;download download-music&quot;&gt;下载&lt;/a&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;attr3&quot;&gt;
        &lt;header&gt;E[attr|=attr]&lt;/header&gt;
        &lt;div class=&quot;wrap-box&quot;&gt;
          &lt;a href=&quot;./a.rmvb&quot; class=&quot;download&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./b.rmvb&quot; class=&quot;download-movie&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./a.mp3&quot; class=&quot;download-music&quot;&gt;下载&lt;/a&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;attr4&quot;&gt;
        &lt;header&gt;E[attr*=val]&lt;/header&gt;
        &lt;div class=&quot;wrap-box&quot;&gt;
          &lt;a href=&quot;./a.rmvb&quot; class=&quot;download&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./b.rmvb&quot; class=&quot;moviedownload&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./a.mp3&quot; class=&quot;downloadmusic&quot;&gt;下载&lt;/a&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;attr5&quot;&gt;
        &lt;header&gt;E[attr^=val]&lt;/header&gt;
        &lt;div class=&quot;wrap-box&quot;&gt;
          &lt;a href=&quot;./a.rmvb&quot; class=&quot;download&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./b.rmvb&quot; class=&quot;moviedownload&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./a.mp3&quot; class=&quot;downloadmusic&quot;&gt;下载&lt;/a&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;attr6&quot;&gt;
        &lt;header&gt;E[attr$=val]&lt;/header&gt;
        &lt;div class=&quot;wrap-box&quot;&gt;
          &lt;a href=&quot;./a.rmvb&quot; class=&quot;download&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./b.rmvb&quot; class=&quot;moviedownload&quot;&gt;下载&lt;/a&gt;
          &lt;a href=&quot;./a.mp3&quot; class=&quot;downloadmusic&quot;&gt;下载&lt;/a&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>最后来张表格：</p>
<p><img src="http://img.smyhvae.com/20180207_1500.png" alt="" /></p>
<h3 id="结构伪类选择器"><a class="header" href="#结构伪类选择器">结构伪类选择器</a></h3>
<p>伪类选择器的标志性符号是 <code>:</code>。</p>
<p>CSS 中有一些伪类选择器，比如<code>:link</code>、<code>:active</code>、<code>:visited</code>、<code>:hover</code>，这些是动态伪类选择器。</p>
<p>CSS3 又新增了其它的伪类选择器。这一小段，我们来学习 CSS3 中的<strong>结构伪类选择器</strong>：即通过<strong>结构</strong>来进行筛选。</p>
<p><strong>1、格式：（第一部分）</strong></p>
<ul>
<li>
<p><code>E:first-child</code> 匹配父元素的第一个子元素 E。</p>
</li>
<li>
<p><code>E:last-child</code> 匹配父元素的最后一个子元素 E。</p>
</li>
<li>
<p><code>E:nth-child(n)</code> 匹配父元素的第 n 个子元素 E。<strong>注意</strong>，盒子的编号是从<code>1</code>开始算起，不是从<code>0</code>开始算起。</p>
</li>
<li>
<p><code>E:nth-child(odd)</code> 匹配奇数</p>
</li>
<li>
<p><code>E:nth-child(even)</code> 匹配偶数</p>
</li>
<li>
<p><code>E:nth-last-child(n)</code> 匹配父元素的倒数第 n 个子元素 E。</p>
</li>
</ul>
<p>理解：</p>
<p>（1）这里我们要好好理解<strong>父元素</strong>的含义，它指的是：以 E 元素的父元素为参考。</p>
<p>（2）注意：以上选择器中所选到的元素的类型，必须是指定的类型 E，如果选不中，则无效。这个要好好理解，具体可以看 CSS
参考手册中的<code>E:nth-child(n)</code>的示例。我们可以理解成：<strong>先根据选择器找到选中的全部位置，如果发现某个位置不是类型 E，则该位置失效</strong>。</p>
<p>（3）另外，<code>E:nth-child(n)</code>这个属性也很有意思。比如，针对下面这样一组标签：</p>
<pre><code class="language-html">&lt;ul&gt;
  &lt;li&gt;1&lt;/li&gt;
  &lt;li&gt;2&lt;/li&gt;
  &lt;li&gt;3&lt;/li&gt;
  &lt;li&gt;4&lt;/li&gt;
  &lt;li&gt;5&lt;/li&gt;
  &lt;li&gt;6&lt;/li&gt;
  &lt;li&gt;7&lt;/li&gt;
  &lt;li&gt;8&lt;/li&gt;
  &lt;li&gt;9&lt;/li&gt;
  &lt;li&gt;10&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>上方代码中：</p>
<ul>
<li>
<p>如果选择器写成<code>li:nth-child(2)</code>，则表示第 2 个 <code>li</code>。</p>
</li>
<li>
<p>如果选择器写成<code>li:nth-child(n)</code>，则表示<strong>所有的</strong> <code>li</code>。因为此时的 <code>n</code> 表示 0,1,2,3,4,5,6,7,8…..（当
n 小于 1 时无效，因为 n = 0 也是不会选中的）</p>
</li>
<li>
<p>如果选择器写成<code>li:nth-child(2n)</code>，则表示所有的<strong>第偶数个</strong> li。</p>
</li>
<li>
<p>如果选择器写成<code>li:nth-child(2n+1)</code>，则表示所有的<strong>第奇数个</strong> li。</p>
</li>
<li>
<p>如果选择器写成<code>li:nth-child(-n+5)</code>，则表示<strong>前 5 个</strong> li。</p>
</li>
<li>
<p>如果选择器写成<code>li:nth-last-child(-n+5)</code>，则表示<strong>最后 5 个</strong> li。</p>
</li>
<li>
<p>如果选择器写成<code>li:nth-child(7n)</code>，则表示选中 7 的倍数。。</p>
</li>
</ul>
<p>上面列举的选择器中，我们只要记住： <code>n</code> 表示 0,1,2,3,4,5,6,7,8…..就很容易明白了。</p>
<p><strong>2、格式：（第二部分）</strong></p>
<ul>
<li>
<p><code>E:first-of-type</code> 匹配同类型中的第一个同级兄弟元素 E。</p>
</li>
<li>
<p><code>E:last-of-type</code> 匹配同类型中的最后一个同级兄弟元素 E。</p>
</li>
<li>
<p><code>E:nth-of-type(n)</code> 匹配同类型中的第 n 个同级兄弟元素 E。</p>
</li>
<li>
<p><code>E:nth-last-of-type(n)</code> 匹配同类型中的倒数第 n 个同级兄弟元素 E。</p>
</li>
</ul>
<p>既然上面这几个选择器带有<code>type</code>，我们可以这样理解：先在同级里找到所有的 E 类型，然后根据 n 进行匹配。</p>
<p><strong>3、格式：（第三部分）</strong></p>
<ul>
<li>
<p><code>E:empty</code> 匹配没有任何子节点（包括空格等 text 节点）的元素 E。</p>
</li>
<li>
<p><code>E:target</code> 匹配相关 URL 指向的 E 元素。要配合锚点使用。</p>
</li>
</ul>
<p><strong>举例：</strong></p>
<p>我们可以把多个伪类选择器结合起来使用，比如：</p>
<p><img src="http://img.smyhvae.com/20180207_1340.png" alt="" /></p>
<p>如果想把上图中，第一行的前三个 span 标红，我们可以这样使用结构伪类选择器：</p>
<pre><code class="language-css">dt:first-child span:nth-of-type(-n + 3) {
  color: red;
}
</code></pre>
<p>最后来张表格：</p>
<p><img src="http://img.smyhvae.com/20180207_1502.png" alt="" /></p>
<h3 id="伪元素选择器"><a class="header" href="#伪元素选择器">伪元素选择器</a></h3>
<p>伪元素选择器的标志性符号是 <code>::</code>。</p>
<p><strong>1、格式：（第一部分）</strong></p>
<ul>
<li>
<p><code>E::before</code> 设置在 元素 E 前面（依据对象树的逻辑结构）的内容，配合 content 属性一起使用。</p>
</li>
<li>
<p><code>E::after</code> 设置在 元素 E 后面（依据对象树的逻辑结构）的内容，配合 content 属性一起使用。</p>
</li>
</ul>
<p><code>E:after</code>、<code>E:before</code>在旧版本里是伪类，在 CSS3
这个新版本里是伪元素。新版本里，<code>E:after</code>、<code>E:before</code>会被自动识别为<code>E::after</code>、<code>E::before</code>，按伪元素来对待，这样做的目的是用来做兼容处理。</p>
<p>举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
      /*::before 和::after 是通过 css 模拟出的html标签的效果*/
      span::before {
        content: &quot;smyhvae&quot;;
        color: red;
        background-color: pink;
        width: 50px;
        height: 50px;
        display: inline-block;
      }

      span::after {
        content: &quot;永不止步&quot;;
        color: yellowgreen;
      }

      /*给原本的span标签设置一个默认的属性*/
      span {
        border: 1px solid #000;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;span&gt;生命壹号&lt;/span&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180207_1409.png" alt="" /></p>
<p><strong>上图可以看出</strong>：</p>
<ul>
<li>
<p>通过伪元素选择器，就可以添加出类似于 span 标签的效果（记得要结合 content 属性使用）。</p>
</li>
<li>
<p>通过这两个属性添加的伪元素，是<strong>行内元素</strong>，需要转换成块元素才能设置宽高。</p>
</li>
</ul>
<p><strong>2、格式：（第二部分）</strong></p>
<ul>
<li>
<p><code>E::first-letter</code> 设置元素 E 里面的<strong>第一个字符</strong>的样式。</p>
</li>
<li>
<p><code>E::first-line</code> 设置元素 E 里面的<strong>第一行</strong>的样式。</p>
</li>
<li>
<p><code>E::selection</code> 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。</p>
</li>
</ul>
<p><code>E::first-letter</code> 的举例：</p>
<p><img src="http://img.smyhvae.com/20180207_1430.png" alt="" /></p>
<p><code>E::first-line</code>的举例：</p>
<p><img src="http://img.smyhvae.com/20180207_1433.png" alt="" /></p>
<p>最后来张表格：</p>
<p><img src="http://img.smyhvae.com/20180207_1503.png" alt="" /></p>
<blockquote>
<p>以下是正文。</p>
</blockquote>
<h2 id="前言-4"><a class="header" href="#前言-4">前言</a></h2>
<p>我们在上一篇文章中学习了<a href="http://www.cnblogs.com/smyhvae/p/8426799.html">CSS3 的选择器</a>，本文来学一下
CSS3 的一些属性。</p>
<p>本文主要内容：</p>
<ul>
<li>
<p>文本</p>
</li>
<li>
<p>盒模型中的 box-sizing 属性</p>
</li>
<li>
<p>处理兼容性问题：私有前缀</p>
</li>
<li>
<p>边框</p>
</li>
<li>
<p>背景属性</p>
</li>
<li>
<p>渐变</p>
</li>
</ul>
<h2 id="文本"><a class="header" href="#文本">文本</a></h2>
<h3 id="text-shadow设置文本的阴影"><a class="header" href="#text-shadow设置文本的阴影">text-shadow：设置文本的阴影</a></h3>
<p>格式举例：</p>
<pre><code class="language-javascript">text-shadow: 20px 27px 22px pink;
</code></pre>
<p>参数解释：水平位移 垂直位移 模糊程度 阴影颜色。</p>
<p>效果举例：</p>
<p><img src="http://img.smyhvae.com/20180207_1600.png" alt="" /></p>
<h3 id="举例凹凸文字效果"><a class="header" href="#举例凹凸文字效果">举例：凹凸文字效果</a></h3>
<p>text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。</p>
<p>代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
      body {
        background-color: #666;
      }

      div {
        font-size: 100px;
        text-align: center;
        font-weight: bold;
        font-family: &quot;Microsoft Yahei&quot;;
        color: #666;
      }

      /* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
      .tu {
        text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
      }

      .ao {
        text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;ao&quot;&gt;生命壹号&lt;/div&gt;
    &lt;div class=&quot;tu&quot;&gt;生命壹号&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180207_1617.png" alt="" /></p>
<p>上图中，实现凹凸文字效果的方式比较简单，给左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果。</p>
<h2 id="盒模型中的-box-sizing-属性"><a class="header" href="#盒模型中的-box-sizing-属性">盒模型中的 box-sizing 属性</a></h2>
<p>我们在**<a href="http://www.cnblogs.com/smyhvae/p/7256371.html">之前的文章</a>**中专门讲过盒子模型。</p>
<p>CSS3 对盒模型做出了新的定义，即允许开发人员<strong>指定盒子宽度和高度的计算方式</strong>。</p>
<p>这就需要用到 <code>box-sizing</code>属性。它的属性值可以是：<code>content-box</code>、<code>border-box</code>。解释如下。</p>
<p><strong>外加模式：</strong>（css 的默认方式）</p>
<pre><code class="language-javascript">box-sizing: content-box;
</code></pre>
<p>解释：此时设置的 width 和 height
是<strong>内容区域</strong>的宽高。<code>盒子的实际宽度 = 设置的 width + padding + border</code>。此时改变 padding 和 border
的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。</p>
<p><strong>内减模式：</strong>【需要注意】</p>
<pre><code class="language-javascript">box-sizing: border-box;
</code></pre>
<p>解释：此时设置的 width 和 height 是<strong>盒子</strong>的总宽高。<code>盒子的实际宽度 = 设置的 width</code>。此时改变 padding 和 border
的大小，会改变内容的宽高，盒子的总宽高不变。</p>
<h2 id="处理兼容性问题私有前缀"><a class="header" href="#处理兼容性问题私有前缀">处理兼容性问题：私有前缀</a></h2>
<p>通过网址<a href="http://caniuse.com/">http://caniuse.com/</a> 可以查询 CSS3 各特性的支持程度。</p>
<p>处理兼容性问题的常见方法：为属性添加<strong>私有前缀</strong>。</p>
<p>如此方法不能解决，应尽量避免使用，无需刻意去处理 CSS3 的兼容性问题。</p>
<p><strong>私有前缀的举例</strong>：</p>
<p>比如说，我想给指定的 div 设置下面这样一个属性：</p>
<pre><code class="language-css">background: linear-gradient(left, green, yellow);
</code></pre>
<p>上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。</p>
<p>如果直接这样写属性，是看不到效果的：</p>
<p><img src="http://img.smyhvae.com/20180207_1700.png" alt="" /></p>
<p>此时，我们可以<strong>为浏览器添加不同的私有前缀</strong>，属性就可以生效了。</p>
<p>格式如下：</p>
<pre><code class="language-html">-webkit-: 谷歌 苹果 -moz-:火狐 -ms-：IE -o-：欧朋
</code></pre>
<p>格式举例如下：</p>
<pre><code class="language-css">background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180207_1710.png" alt="" /></p>
<h2 id="边框"><a class="header" href="#边框">边框</a></h2>
<p>边框的属性很多，其中<strong>边框圆角</strong>和<strong>边框阴影</strong>这两个属性，应用十分广泛，兼容性也相对较好，且符合<strong>渐进增强</strong>的原则，需要重点熟悉。</p>
<h3 id="边框圆角border-radius-属性"><a class="header" href="#边框圆角border-radius-属性">边框圆角：<code>border-radius</code> 属性</a></h3>
<p>边框的每个圆角，本质上是一个圆，圆有<strong>水平半径</strong>和<strong>垂直半径</strong>：如果二者相等，就是圆；如果二者不等， 就是椭圆。</p>
<p>单个属性的写法：</p>
<pre><code class="language-css">border-top-left-radius: 60px 120px; //参数解释：水平半径   垂直半径

border-top-right-radius: 60px 120px;

border-bottom-left-radius: 60px 120px;

border-bottom-right-radius: 60px 120px;
</code></pre>
<p>复合写法：</p>
<pre><code>	border-radius: 60px/120px;             //参数：水平半径/垂直半径

	border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值

	border-radius: 20px 60px;
</code></pre>
<p>最简洁的写法：（四个角的半径都相同时）</p>
<pre><code>border-radius: 60px;
</code></pre>
<p>举例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
      .parent {
        width: 400px;
      }
      .box {
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid rgb(144, 12, 63);
        margin: 20px;
        text-align: center;
        line-height: 100px;
        color: #fff;
        font-size: 50px;
        background-color: rgb(255, 141, 26);
      }

      /*画圆形的方式一*/
      .box:nth-child(1) {
        border-radius: 50px;
      }

      /*画圆形的方式二*/
      .box:nth-child(2) {
        border-radius: 50%;
      }

      .box:nth-child(3) {
        border-radius: 100px 0 0 0;
      }

      .box:nth-child(4) {
        border-radius: 100px/50px;
      }

      .box:nth-child(5) {
        border-radius: 10%;
      }

      .box:nth-child(6) {
        border-radius: 0 100px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;box&quot;&gt;1&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;2&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;3&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;4&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;5&lt;/div&gt;
      &lt;div class=&quot;box&quot;&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180207_1750.png" alt="" /></p>
<h3 id="边框阴影box-shadow-属性"><a class="header" href="#边框阴影box-shadow-属性">边框阴影：<code>box-shadow</code> 属性</a></h3>
<p>格式举例：</p>
<pre><code class="language-javascript">	box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色

	box-shadow: 15px 21px 48px -2px #666;
</code></pre>
<p>参数解释：</p>
<ul>
<li>
<p>水平偏移：正值向右 负值向左。</p>
</li>
<li>
<p>垂直偏移：正值向下 负值向上。</p>
</li>
<li>
<p>模糊程度：不能为负值。</p>
</li>
</ul>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180207_2027.png" alt="" /></p>
<p>另外，后面还可以再加一个 inset 属性，表示内阴影。如果不写，则默认表示外阴影。例如：</p>
<pre><code class="language-javascript">box-shadow:3px 3px 3px 3px #666 inset;
</code></pre>
<p>效果如下：</p>
<p>20180207_2028.png <img src="http://img.smyhvae.com/20180206_2150.png" alt="" /></p>
<p><strong>注意</strong>：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。</p>
<p>我们还可以设置多重边框阴影，实现更好的效果，增强立体感。</p>
<h3 id="边框图片"><a class="header" href="#边框图片">边框图片</a></h3>
<p>边框图片有以下属性：</p>
<pre><code class="language-javascript">	/* 边框图片的路径*/
	border-image-source: url(&quot;images/border.png&quot;);

	/* 图片边框的裁剪*/
	border-image-slice: 27;

	/*图片边框的宽度*/
	border-image-width: 27px;

	/*边框图片的平铺*/
	/* repeat :正常平铺 但是可能会显示不完整*/
	/*round: 平铺 但是保证 图片完整*/
	/*stretch: 拉伸显示*/
	border-image-repeat: stretch;
</code></pre>
<p>我们也可以写成一个综合属性：</p>
<pre><code class="language-javascript">border-image: url(&quot;images/border.png&quot;) 27/20px round;
</code></pre>
<p>这个属性要好好理解，我们假设拿下面这张图来作为边框图片：</p>
<p><img src="http://img.smyhvae.com/20180207_2045.png" alt="" /></p>
<p><img src="http://img.smyhvae.com/20180207_2046.png" alt="" /></p>
<p>这张图片将会被“切割”成<strong>九宫格</strong>形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：</p>
<p><img src="http://img.smyhvae.com/20180207_2050.png" alt="" /></p>
<p>再具体一点：</p>
<p><img src="http://img.smyhvae.com/20180207_2051.png" alt="" /></p>
<h3 id="常见的边框图片汇总"><a class="header" href="#常见的边框图片汇总">常见的边框图片汇总</a></h3>
<pre><code class="language-html"></code></pre>
<p>CSS3 的更多属性，且看下文继续。</p>
<p>我们在 div 里放一个 img，发现：</p>
<p>在 html 和 html5 中，div 的长宽是不同的，后者的高度要超过几个像素。</p>
<p>比如说，下面这个是 html 的。</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      * {
        margin: 0px;
        padding: 0px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;img src=&quot;/Users/smyhvae/Dropbox/img/20170813_1143.jpg&quot; alt=&quot;&quot; /&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

                    </main>

                    <nav class="nav-wrapper" aria-label="Page navigation">
                        <!-- Mobile navigation buttons -->
                            <a rel="prev" href="../../posts/angular/same_route_reload.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                                <i class="fa fa-angle-left"></i>
                            </a>

                            <a rel="next" href="../../posts/css/use_css_media.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                                <i class="fa fa-angle-right"></i>
                            </a>

                        <div style="clear: both"></div>
                    </nav>
                </div>
            </div>

            <nav class="nav-wide-wrapper" aria-label="Page navigation">
                    <a rel="prev" href="../../posts/angular/same_route_reload.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                        <i class="fa fa-angle-left"></i>
                    </a>

                    <a rel="next" href="../../posts/css/use_css_media.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                        <i class="fa fa-angle-right"></i>
                    </a>
            </nav>

        </div>



        <script>
            window.playground_line_numbers = true;
        </script>

        <script>
            window.playground_copyable = true;
        </script>

        <script src="../../ace.js"></script>
        <script src="../../editor.js"></script>
        <script src="../../mode-rust.js"></script>
        <script src="../../theme-dawn.js"></script>
        <script src="../../theme-tomorrow_night.js"></script>

        <script src="../../elasticlunr.min.js"></script>
        <script src="../../mark.min.js"></script>
        <script src="../../searcher.js"></script>

        <script src="../../clipboard.min.js"></script>
        <script src="../../highlight.js"></script>
        <script src="../../book.js"></script>

        <!-- Custom JS scripts -->
        <script src="../../src/js/custom.js"></script>


    </div>
    </body>
</html>
